CSS自定義形狀箭頭

雖然自定義CSS形狀的一個很好的教程是http://css-tricks.com/examples/ShapesOfCSS/，但我想要一個像這樣的形狀http://upload.wikimedia.org/wikipedia/commons/1/13/Red_Arrow_Up.svg。 Thx事先爲這個新手的幫助。CSS自定義形狀箭頭

齊亞

來源

2014-07-12 Zia

你嘗試過什麼了嗎？ –

我很抱歉，但我沒有得到你的問題。儘管我嘗試過「Triangle Up」，但我想要的形狀有點不同。我不知道在哪裏扭曲？ – Zia

這是你的確切要求。

 <!DOCTYPE html> 
     <html> 
     <head> 
     <style> 
     #star-five { 
       margin: 100px 0; 
       position: relative; 
      display: block; 
      color: red; 
      width: 0px; 
      height: 0px; 

     border-bottom: 70px solid red; 
     border-left: 100px solid transparent; 
     -moz-transform: rotate(-38deg); 
     -webkit-transform: rotate(-38deg); 
     -ms-transform:  rotate(-38deg); 
      -o-transform:  rotate(-38deg); 
      } 
     #star-five:before { 

      border-left: 30px solid transparent; 
      border-right: 30px solid transparent; 
      position: absolute; 
      height: 0; 
     width: 0; 
     top: -45px; 
      left: -65px; 
     display: block; 
     content: ''; 
     -webkit-transform: rotate(-35deg); 
     -moz-transform: rotate(-35deg); 
     -ms-transform:  rotate(-35deg); 
     -o-transform:  rotate(-35deg); 

     } 
     #star-five:after { 
     position: absolute; 
     display: block; 
     color: red; 
    top: 3px; 
    left: -105px; 
     width: 0px; 
     height: 0px; 
     border-right: 100px solid transparent; 
    border-bottom: 70px solid red; 
    border-left: 100px solid transparent; 
    -webkit-transform: rotate(-70deg); 
    -moz-transform: rotate(-70deg); 
    -ms-transform:  rotate(-70deg); 
    -o-transform:  rotate(-70deg); 
    content: ''; 
     } 


     </style> 
     </head> 
    <body> 
     <div id="star-five"> 
     </div> 
     </body>

來源

2014-07-12 10:33:33 Praveen

Thx很多傢伙！普利文的回答是我所期待:) [JS小提琴] http://jsfiddle.net/yuGxT/3/ 齊亞 – Zia

ü歡迎齊亞...請隨時的幫助。如果你喜歡我的回答，那麼也請回答我的答案。 – Praveen

我欣賞:-) 但是因爲我對Stackoverflow很陌生，所以我不能爲你的答案投票，我需要15個聲望。否則，我已經嘗試投票。對不起。 – Zia

這將只通過覆蓋在彼此的頂部上兩個分開的三角形工作 - 一個紅色，然後更小的高度的白色三角形在它上面。

HTML：

<div id="triangleContainer"> 
    <div id="triangleRed"></div> 
    <div id="triangleWhite"></div> 
</div>

CSS：

#triangleContainer{ 
    position:relative; 
    height:100px; 
} 

#triangleRed { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 100px solid red; 
    position:absolute; 
    bottom:0;left:0; 
} 

#triangleWhite { 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom:30px solid white; 
    position:absolute; 
    bottom:0;left:0; 
}

JSFiddle

來源

2014-07-12 10:15:30 Ben

你可以使用僞元素而不是那些2個額外的'div's – MMachinegun

CSS自定義形狀箭頭

回答

相關問題