CSS 自定义形状箭头答案

【问题标题】：CSS Custom Shape ArrowCSS 自定义形状箭头
【发布时间】：2014-07-12 18:38:35
【问题描述】：

虽然http://css-tricks.com/examples/ShapesOfCSS/ 上有一个很好的自定义 CSS 形状教程，但我想要一个类似 http://upload.wikimedia.org/wikipedia/commons/1/13/Red_Arrow_Up.svg 的形状。感谢这位新手的帮助。

齐亚

【问题讨论】：

你试过了吗？
很抱歉，我没有收到您的问题。虽然我尝试过“三角形向上”，但我想要一个不同的形状。我不知道在哪里扭？

标签： html css css-shapes

【解决方案1】：

这是您的确切要求。

        <!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>

【讨论】：

谢谢各位！ Praveen 的回答是我所期待的 :) [JS Fiddle] jsfiddle.net/yuGxT/3 Zia
你欢迎 zia...随时寻求帮助。如果你喜欢我的回答，那么也投票赞成我的回答。
我很感激 :-) 但由于我对 Stackoverflow 还很陌生，所以我不能为你的答案投票，为此我需要 15 个声誉。否则我已经尝试投票了。对不起。

【解决方案2】：

这只能通过将两个独立的三角形叠加在一起来实现 - 一个红色，然后是一个较小高度的白色三角形。

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

【讨论】：

你可以使用伪元素代替那两个额外的divs