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自定义形状箭头

回答

相关问题