我該如何用html和css編碼這樣的箭頭？

圓角也是可能的嗎？謝謝！

2016-05-12 Cobalt lee

爲什麼不使用SVG文件。爲什麼你只想使用html和css？ –

我正在使用的服務不允許我使用svg文件 –

您是否可以不將svg代碼直接放在文檔中？我認爲任何css方法都可能看起來有點銳利 –

圓角箭頭 https://plnkr.co/edit/5Zid5EKLY3x8yOOipiJp?p=preview

<body> 
    <h1>Hello Arrow!</h1> 

    <div class="square-div"> 
     <div class="arrow-p1"> 

     </div> 
     <div class="arrow-p2"> 

     </div> 
    </div> 
    </body> 

.square-div{ 
    width:80px; 
    height:80px; 
    background:orange; 
} 

.arrow-p1{ 
    background:green; 
    height:16px; 
    width:50px; 
    position:relative; 
    transform:rotate(45deg); 
    border-radius:8px; 
    top:22px; 
    left:10px; 
} 
.arrow-p2{ 
    background:green; 
    height:16px; 
    width:50px; 
    position:relative; 
    top:30px; 
    border-radius:8px; 
    transform:rotate(-45deg); 
    left:10px; 
}

來源

2016-05-12 15:52:10

我們將使用前後畫的箭頭，你可以看到這裏的例子：https://jsfiddle.net/IA7medd/2zrgww4f/

<div class='arrow_box'></div>

和CSS將是這樣

.arrow_box { 
     position: relative; 
    width: 72px; 
    height: 72px; 
    background:#FDB600; 
} 
.arrow_box:after, .arrow_box:before { 
    left: 50%; 
    top: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    margin-left: -15px; 
} 

.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-left-color: #FDB600; 
    border-width: 15px; 
    margin-top: -15px; 
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-left-color: #2A0C5B; 
    border-width: 30px; 
    margin-top: -30px; 
}

來源

2016-05-12 15:48:48

是否有可能有圓邊？ –

測試此鏈接：https：//jsfiddle.net/IA7medd/4ytapoqh/ –

這是svg替代

<div class="svg"> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px" viewBox="0 -20 60 110" xml:space="preserve"> 
    <polyline fill="none" stroke="#000000" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" points=" 
    0.375,0.375 45.63,38.087 0.375,75.8 "/> 
    </svg> 
</div>

https://fiddle.jshell.net/oxpwy3wq/1/

來源

2016-05-12 16:00:16

我喜歡SVG的自己，所以我會在環拋出這個也一樣，你可以控制SVG與CSS爲你所期望的。

.container { 
 
    display: inline-block; 
 
    background: orange; 
 
} 
 
.chev-right { 
 
    fill: purple; 
 
    height: 60px; 
 
    width: 60px; 
 
    padding: 5px 10px 5px 10px; 
 
}

<div class="container"> 
 
    <svg class="chev-right" viewBox="0 0 24 24"> 
 
    <g transform="scale(0.0234375 0.0234375)"> 
 
     <path d="M366.336 238.336c-33.323 33.323-33.323 87.339 0 120.661l152.96 153.003-152.96 153.003c-33.323 33.323-33.323 87.339 0 120.661 16.64 16.683 38.485 25.003 60.331 25.003s43.691-8.32 60.331-25.003l273.707-273.664-273.707-273.664c-33.28-33.323-87.381-33.323-120.661 0z" 
 
     /> 
 
    </g> 
 
    </svg> 
 
</div>

來源

2016-05-12 16:02:33

您可以使用邊界半徑。

http://codepen.io/anon/pen/NNJQgM

<div class="arrow"> 
    <div class="rotate"> 
    <div class="top"></div> 
    <div class="left"></div> 
    </div> 
</div>

CSS：

.arrow { 
    position: absolute; 
    top: 100px; 
    width: 50px; 
    height: 50px; 
    background-color: #FEB165; 
} 
.arrow .rotate { 
    position: relative; 
    top: 10px; 
    left: -15px; 
    transform: rotate(135deg); 
} 
.arrow .rotate .top { 
    width: 30px; 
    height: 10px; 
    border-radius: 5px; 
    background-color: black; 
} 
.arrow .rotate .left { 
    position: relative; 
    top: -10px; 
    width: 10px; 
    height: 30px; 
    border-radius: 5px; 
    background-color: black; 
}

來源

2016-05-12 16:14:04

我該如何用html和css編碼這樣的箭頭？

回答

相關問題