简体   繁体   中英

CSS Custom Shape Arrow

Although a good tutorial for custom CSS shapes is on http://css-tricks.com/examples/ShapesOfCSS/ but I want a shape something like this http://upload.wikimedia.org/wikipedia/commons/1/13/Red_Arrow_Up.svg . Thx beforehand for this newbie's help.

Zia

Here's your exact requirement.

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

This will only work by overlaying two separate triangles on top of each other - one red, then a smaller height white triangle above it.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM