圓形箭頭與CSS

可能重複：
How to create a triangle in CSS3 using border-radius 圓形箭頭與CSS

他們是能夠使與CSS？

普通箭頭：

.some_element:after{  
    content: ''; 
    height: 0; 
    width: 0; 
    position: absolute;   
    top: 0; 
    left: 0;  
    border: 100px solid transparent; 
    border-top-color: #000;   
}

（http://jsfiddle.net/W3xwE/）

圓形箭頭（我想只有底部側四捨五入）：

enter image description here

來源

2012-09-17 Alex

不要以爲CSS有端蓋能力（但我沒有在CSS3看起來太緊密但是，這可能是錯誤的這個c ount），但html5 canvas元素確實有endcaps。 –

它可以做，但它需要一些破解或你可以做到HTML5？與畫布腳本 –

不同的方向，但這可能會有所幫助：http://stackoverflow.com/a/12042194/453277 –

是，這是可能的！你rotate，給它一個border-radius並使用45deglinear-gradient作爲background。

DEMO

HTML：

<div class='arrow'></div>

CSS：

.arrow { 
    width: 7em; 
    height: 7em; 
    border-radius: 0 0 2em 0; 
    margin: 5em; 
    transform: rotate(45deg); 
    background: linear-gradient(-45deg, black 50%, transparent 50%); 

}

如果你想箭頭的角度是不同的，那麼你也可以skew它。

考慮到事實，CSS gradients are not supported by IE9（我不是說「或更老」，因爲你提到你的標籤中的CSS3）。在這種情況下，解決方案是使用堅實的背景，並以某種方式確保上半部分不會顯示，或者通過覆蓋前一個元素，或通過剪裁（參見提供的the answer Tim Medora）。

而且，在這一點上仍然是爲前綴的語法不支持（雖然這會很快發生變化：d），所以你需要手動添加前綴-webkit-，-moz-和-o-。（我沒有將它們添加到演示中，因爲Dabblet使用-prefix-free來完成此操作。）

來源

2012-09-17 14:36:24 Ana

mozilla firefox不支持plz添加代碼爲 –

背景：-moz-linear-gradient（-45deg ，黑色50％，透明50％）; * *之前*前綴的版本。 – Ana

感謝：我希望我知道你喜歡的CSS：（ – Alex

下面是通過在框中放置旋轉的方塊來控制裁剪的方法。就我個人而言，我認爲@Aanna的解決方案更清潔。

http://jsfiddle.net/K44mE/14/

<div id="outer"><div id="inner">&nbsp;</div></div> 

#inner{ 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    transform: rotate(45deg); 
    background-color:silver; 
    width:100px; 
    height:100px; 
    top: -70px; 
    left: 20px; 
    position:relative; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
} 

#outer { 
    position: absolute; 
    width: 140px; 
    height: 70px;  
    top:10px; 
    left:10px; 
    overflow: hidden;  
    border: 1px solid red; 
}

來源

2012-09-17 14:39:11

CSS

.arrow { 
     width: 7em; 
     height: 7em; 
     border-radius: 0 0 2em 0; 
     margin: -2em 2.5em; 
     transform: rotate(45deg); 
     background: linear-gradient(-45deg, black 50%, transparent 50%); 

    }

HTML

<div class='arrow'></div>

來源

2012-09-17 14:53:51 Champ

是不是很有趣？看起來就像我做的演示。爲我服務，我應該相信超自然現象。 – Ana

我不知道這是怎麼發生的我認爲演示頁面是我的搜索結果頁面之一：P – Champ

圓形箭頭與CSS

回答

相關問題