Question

虽然自定义CSS形状的一个很好的教程在http://css-tricks.com/examples/ShapesOfCSS/，但我想要一个类似于http://upload.wikimedia.org/wikipedia/commons/1/13/Red_Arrow_Up.svg的形状。对于这个新手的帮助，请事先确定。

齐亚

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

Answer 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

CSS自定义形状箭头

2 个答案: