为方便观看效果图，请移步原文：https://www.jqhtml.com/8045.html

Square

 
# square {      width : 100px ;      height : 100px ;      background : red ; }

Rectangle

 
#rectangle{      width : 200px ;      height : 100px ;      background : red ; }

Circle

 
# circle {      width : 100px ;      height : 100px ;      background : red ;      -moz-border-radius: 50px ;      -webkit-border-radius: 50px ;      border-radius: 50px ; }   /* Cleaner, but slightly less support: use "50%" as value */

oval

 
#oval {      width : 200px ;      height : 100px ;      background : red ;      -moz-border-radius: 100px / 50px ;      -webkit-border-radius: 100px / 50px ;      border-radius: 100px / 50px ; }   /* Cleaner, but slightly less support: use "50%" as value */

Triangle Up

 
#triangle-up {      width : 0 ;      height : 0 ;      border-left : 50px solid transparent ;      border-right : 50px solid transparent ;      border-bottom : 100px solid red ; }

Triangle Down

 
#triangle-down {      width : 0 ;      height : 0 ;      border-left : 50px solid transparent ;      border-right : 50px solid transparent ;      border-top : 100px solid red ; }

Triangle Left

 
#triangle- left {      width : 0 ;      height : 0 ;      border-top : 50px solid transparent ;      border-right : 100px solid red ;      border-bottom : 50px solid transparent ; }

Triangle Right

 
#triangle- right {      width : 0 ;      height : 0 ;      border-top : 50px solid transparent ;      border-left : 100px solid red ;      border-bottom : 50px solid transparent ; }

Triangle Top Left

 
#triangle-topleft {      width : 0 ;      height : 0 ;      border-top : 100px solid red ;      border-right : 100px solid transparent ; }

Triangle Top Right

 
#triangle-topright {      width : 0 ;      height : 0 ;      border-top : 100px solid red ;      border-left : 100px solid transparent ;   }

Triangle Bottom Left

 
#triangle-bottomleft {      width : 0 ;      height : 0 ;      border-bottom : 100px solid red ;      border-right : 100px solid transparent ; }

Triangle Bottom Right

 
#triangle-bottomright {      width : 0 ;      height : 0 ;      border-bottom : 100px solid red ;      border-left : 100px solid transparent ; }

Curved Tail Arrow

 
#curvedarrow {    position : relative ;    width : 0 ;    height : 0 ;    border-top : 9px solid transparent ;    border-right : 9px solid red ;    -webkit-transform: rotate( 10 deg);    -moz-transform: rotate( 10 deg);    -ms-transform: rotate( 10 deg);    -o-transform: rotate( 10 deg); } #curvedarrow:after {    content : "" ;    position : absolute ;    border : 0 solid transparent ;    border-top : 3px solid red ;    border-radius: 14px 0 0 0 ;    top : -12px ;    left : -9px ;    width : 12px ;    height : 12px ;    -webkit-transform: rotate( 45 deg);    -moz-transform: rotate( 45 deg);    -ms-transform: rotate( 45 deg);    -o-transform: rotate( 45 deg); }

Trapezoid

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

Parallelogram

 
#parallelogram {      width : 150px ;      height : 100px ;      -webkit-transform: skew( 20 deg);         -moz-transform: skew( 20 deg);           -o-transform: skew( 20 deg);      background : red ; }

Star (6-points)

 
#star-six {      width : 0 ;      height : 0 ;      border-left : 50px solid transparent ;      border-right : 50px solid transparent ;      border-bottom : 100px solid red ;      position : relative ; } #star-six:after {      width : 0 ;      height : 0 ;      border-left : 50px solid transparent ;      border-right : 50px solid transparent ;      border-top : 100px solid red ;      position : absolute ;      content : "" ;      top : 14px ;      left : -50px ; }

Star (5-points)

 
#star-five {     margin : 50px 0 ;     position : relative ;     display : block ;     color : red ;     width : 0px ;     height : 0px ;     border-right :  100px solid transparent ;     border-bottom : 70px  solid red ;     border-left :   100px solid transparent ;     -moz-transform:    rotate( 35 deg);     -webkit-transform: rotate( 35 deg);     -ms-transform:     rotate( 35 deg);     -o-transform:      rotate( 35 deg); } #star-five:before {     border-bottom : 80px solid red ;     border-left : 14px solid transparent ;     border-right : 14px solid transparent ;     position : absolute ;     height : 0 ;     width : 0 ;     top : -45px ;     left : -65px ;     display : block ;     content : '' ;     -webkit-transform: rotate( -35 deg);     -moz-transform:    rotate( -35 deg);     -ms-transform:     rotate( -35 deg);     -o-transform:      rotate( -35 deg);   } #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( -70 deg);     -moz-transform:    rotate( -70 deg);     -ms-transform:     rotate( -70 deg);     -o-transform:      rotate( -70 deg);     content : '' ; }

Pentagon

 
#pentagon {      position : relative ;      width : 54px ;      border-width : 50px 14px 0 ;      border-style : solid ;      border-color : red transparent ; } #pentagon:before {      content : "" ;      position : absolute ;      height : 0 ;      width : 0 ;      top : -85px ;      left : -14px ;      border-width : 0 45px 35px ;      border-style : solid ;      border-color : transparent transparent red ; }

Hexagon

 
#hexagon {      width : 100px ;      height : 55px ;      background : red ;      position : relative ; } #hexagon:before {      content : "" ;      position : absolute ;      top : -25px ;      left : 0 ;      width : 0 ;      height : 0 ;      border-left : 50px solid transparent ;      border-right : 50px solid transparent ;      border-bottom : 25px solid red ; } #hexagon:after {      content : "" ;      position : absolute ;      bottom : -25px ;      left : 0 ;      width : 0 ;      height : 0 ;      border-left : 50px solid transparent ;      border-right : 50px solid transparent ;      border-top : 25px solid red ; }

Octagon

 
#octagon {      width : 100px ;      height : 100px ;      background : red ;      position : relative ; }   #octagon:before {      content : "" ;      position : absolute ;      top : 0 ;      left : 0 ;      border-bottom : 29px solid red ;      border-left : 29px solid #eee ;      border-right : 29px solid #eee ;      width : 42px ;      height : 0 ; }   #octagon:after {      content : "" ;      position : absolute ;      bottom : 0 ;      left : 0 ;      border-top : 29px solid red ;      border-left : 29px solid #eee ;      border-right : 29px solid #eee ;      width : 42px ;      height : 0 ; }

Heart

 
#heart {      position : relative ;      width : 100px ;      height : 90px ; } #heart:before, #heart:after {      position : absolute ;      content : "" ;      left : 50px ;      top : 0 ;      width : 50px ;      height : 80px ;      background : red ;      -moz-border-radius: 50px 50px 0 0 ;      border-radius: 50px 50px 0 0 ;      -webkit-transform: rotate( -45 deg);         -moz-transform: rotate( -45 deg);          -ms-transform: rotate( -45 deg);           -o-transform: rotate( -45 deg);              transform: rotate( -45 deg);      -webkit-transform-origin: 0 100% ;         -moz-transform-origin: 0 100% ;          -ms-transform-origin: 0 100% ;           -o-transform-origin: 0 100% ;              transform-origin: 0 100% ; } #heart:after {      left : 0 ;      -webkit-transform: rotate( 45 deg);         -moz-transform: rotate( 45 deg);          -ms-transform: rotate( 45 deg);           -o-transform: rotate( 45 deg);              transform: rotate( 45 deg);      -webkit-transform-origin: 100% 100% ;         -moz-transform-origin: 100% 100% ;          -ms-transform-origin: 100% 100% ;           -o-transform-origin: 100% 100% ;              transform-origin : 100% 100% ; }

Infinity

 
#infinity {      position : relative ;      width : 212px ;      height : 100px ; }   #infinity:before, #infinity:after {      content : "" ;      position : absolute ;      top : 0 ;      left : 0 ;      width : 60px ;      height : 60px ;      border : 14px solid red ;      -moz-border-radius: 50px 50px 0 50px ;           border-radius: 50px 50px 0 50px ;      -webkit-transform: rotate( -45 deg);         -moz-transform: rotate( -45 deg);          -ms-transform: rotate( -45 deg);           -o-transform: rotate( -45 deg);              transform: rotate( -45 deg); }   #infinity:after {      left : auto ;      right : 0 ;      -moz-border-radius: 50px 50px 50px 0 ;           border-radius: 50px 50px 50px 0 ;      -webkit-transform: rotate( 45 deg);         -moz-transform: rotate( 45 deg);          -ms-transform: rotate( 45 deg);           -o-transform: rotate( 45 deg);              transform: rotate( 45 deg); }

Diamond Square

 
#diamond {      width : 0 ;      height : 0 ;      border : 50px solid transparent ;      border-bottom-color : red ;      position : relative ;      top : -50px ; } #diamond:after {      content : '' ;      position : absolute ;      left : -50px ;      top : 50px ;      width : 0 ;      height : 0 ;      border : 50px solid transparent ;      border-top-color : red ; }

Diamond Shield

 
#diamond-shield {      width : 0 ;      height : 0 ;      border : 50px solid transparent ;      border-bottom : 14px solid red ;      position : relative ;      top : -50px ; } #diamond-shield:after {      content : '' ;      position : absolute ;      left : -50px ; top : 14px ;      width : 0 ;      height : 0 ;      border : 50px solid transparent ;      border-top : 70px solid red ; }

Diamond Narrow

 
#diamond-narrow {      width : 0 ;      height : 0 ;      border : 50px solid transparent ;      border-bottom : 70px solid red ;      position : relative ;      top : -50px ; } #diamond-narrow:after {      content : '' ;      position : absolute ;      left : -50px ; top : 70px ;      width : 0 ;      height : 0 ;      border : 50px solid transparent ;      border-top : 70px solid red ; }

Cut Diamond

 
#cut-diamond {      border-style : solid ;      border-color : transparent transparent red transparent ;      border-width : 0 25px 25px 25px ;      height : 0 ;      width : 50px ;      position : relative ;      margin : 14px 0 50px 0 ; } #cut-diamond:after {      content : "" ;      position : absolute ;      top : 25px ;      left : -25px ;      width : 0 ;      height : 0 ;      border-style : solid ;      border-color : red transparent transparent transparent ;      border-width : 70px 50px 0 50px ; }

Egg

 
#egg {     display : block ;     width : 114px ;     height : 180px ;     background-color : red ;     -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px ;     border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40% ; }

Pac-Man

 
#pacman {    width : 0px ;    height : 0px ;    border-right : 60px solid transparent ;    border-top : 60px solid red ;    border-left : 60px solid red ;    border-bottom : 60px solid red ;    border-top-left-radius: 60px ;    border-top-right-radius: 60px ;    border-bottom-left-radius: 60px ;    border-bottom-right-radius: 60px ; }

Talk Bubble

 
#talkbubble {     width : 114px ;     height : 80px ;     background : red ;     position : relative ;     -moz-border-radius:    10px ;     -webkit-border-radius: 10px ;     border-radius:         10px ; } #talkbubble:before {     content : "" ;     position : absolute ;     right : 100% ;     top : 14px ;     width : 0 ;     height : 0 ;     border-top : 13px solid transparent ;     border-right : 14px solid red ;     border-bottom : 13px solid transparent ; }

12 Point Burst

 
#burst -12 {      background : red ;      width : 80px ;      height : 80px ;      position : relative ;      text-align : center ; } #burst -12: before, #burst -12: after {      content : "" ;      position : absolute ;      top : 0 ;      left : 0 ;      height : 80px ;      width : 80px ;      background : red ; } #burst -12: before {      -webkit-transform: rotate( 30 deg);         -moz-transform: rotate( 30 deg);          -ms-transform: rotate( 30 deg);           -o-transform: rotate( 30 deg); } #burst -12: after {      -webkit-transform: rotate( 60 deg);         -moz-transform: rotate( 60 deg);          -ms-transform: rotate( 60 deg);           -o-transform: rotate( 60 deg); }

8 Point Burst

 
#burst -8 {      background : red ;      width : 80px ;      height : 80px ;      position : relative ;      text-align : center ;      -webkit-transform: rotate( 20 deg);         -moz-transform: rotate( 20 deg);          -ms-transform: rotate( 20 deg);           -o-transform: rotate( 20 eg); } #burst -8: before {      content : "" ;      position : absolute ;      top : 0 ;      left : 0 ;      height : 80px ;      width : 80px ;      background : red ;      -webkit-transform: rotate( 135 deg);         -moz-transform: rotate( 135 deg);          -ms-transform: rotate( 135 deg);           -o-transform: rotate( 135 deg); }

Yin Yang

 
#yin-yang {      width : 96px ;      height : 48px ;      background : #eee ;      border-color : red ;      border-style : solid ;      border-width : 2px 2px 50px 2px ;      border-radius: 100% ;      position : relative ; }   #yin-yang:before {      content : "" ;      position : absolute ;      top : 50% ;      left : 0 ;      background : #eee ;      border : 14px solid red ;      border-radius: 100% ;      width : 12px ;      height : 12px ; }   #yin-yang:after {      content : "" ;      position : absolute ;      top : 50% ;      left : 50% ;      background : red ;      border : 14px solid #eee ;      border-radius: 100% ;      width : 12px ;      height : 12px ; }

Badge Ribbon

 
#bad ge-ribbon {   position : relative ;   background : red ;   height : 100px ;   width : 100px ;   -moz-border-radius:    50px ;   -webkit-border-radius: 50px ;   border-radius:         50px ; }   #bad ge-ribbon:before, #bad ge-ribbon:after {    content : '' ;    position : absolute ;    border-bottom : 70px solid red ;    border-left : 40px solid transparent ;    border-right : 40px solid transparent ;    top : 70px ;    left : -10px ;    -webkit-transform: rotate( -140 deg);    -moz-transform:    rotate( -140 deg);    -ms-transform:     rotate( -140 deg);    -o-transform:      rotate( -140 deg); }   #bad ge-ribbon:after {    left : auto ;    right : -10px ;    -webkit-transform: rotate( 140 deg);    -moz-transform:    rotate( 140 deg);    -ms-transform:     rotate( 140 deg);    -o-transform:      rotate( 140 deg); }

Space Invader

 
#space-invader{    box-shadow:      0 0 0 1em red ,      0 1em 0 1em red ,      -2.5em 1.5em 0 . 5em red ,      2.5em 1.5em 0 . 5em red ,      -3em -3em 0 0 red ,      3em -3em 0 0 red ,      -2em -2em 0 0 red ,      2em -2em 0 0 red ,      -3em -1em 0 0 red ,      -2em -1em 0 0 red ,      2em -1em 0 0 red ,      3em -1em 0 0 red ,      -4em 0 0 0 red ,      -3em 0 0 0 red ,      3em 0 0 0 red ,      4em 0 0 0 red ,      -5em 1em 0 0 red ,      -4em 1em 0 0 red ,      4em 1em 0 0 red ,      5em 1em 0 0 red ,      -5em 2em 0 0 red ,      5em 2em 0 0 red ,      -5em 3em 0 0 red ,      -3em 3em 0 0 red ,      3em 3em 0 0 red ,      5em 3em 0 0 red ,      -2em 4em 0 0 red ,      -1em 4em 0 0 red ,      1em 4em 0 0 red ,      2em 4em 0 0 red ;        background : red ;      width : 1em ;      height : 1em ;      overflow : hidden ;        margin : 50px 0 70px 65px ;    }

TV Screen

 
# tv {    position : relative ;    width : 200px ;    height : 150px ;    margin : 14px 0 ;    background : red ;    border-radius: 50% / 10% ;    color : white ;    text-align : center ;    text-indent : . 1em ; } #tv:before {    content : '' ;    position : absolute ;    top : 10% ;    bottom : 10% ;    right : -5% ;    left : -5% ;    background : inherit;    border-radius: 5% / 50% ; }

Chevron

 
#chevron {    position : relative ;    text-align : center ;    padding : 12px ;    margin-bottom : 6px ;    height : 60px ;    width : 200px ; }   #chevron:before {    content : '' ;    position : absolute ;    top : 0 ;    left : 0 ;    height : 100% ;    width : 51% ;    background : red ;    -webkit-transform: skew( 0 deg, 6 deg);    -moz-transform: skew( 0 deg, 6 deg);    -ms-transform: skew( 0 deg, 6 deg);    -o-transform: skew( 0 deg, 6 deg);    transform: skew( 0 deg, 6 deg); } #chevron:after {    content : '' ;    position : absolute ;    top : 0 ;    right : 0 ;    height : 100% ;    width : 50% ;    background : red ;    -webkit-transform: skew( 0 deg, -6 deg);    -moz-transform: skew( 0 deg, -6 deg);    -ms-transform: skew( 0 deg, -6 deg);    -o-transform: skew( 0 deg, -6 deg);    transform: skew( 0 deg, -6 deg); }​

Facebook Icon

 
#faceb ook- icon {    background : red ;    text-indent : -999em ;    width : 100px ;    height : 110px ;    border-radius: 5px ;    position : relative ;    overflow : hidden ;    border : 15px solid red ;    border-bottom : 0 ; } #faceb ook-icon::before {    content : "/20" ;    position : absolute ;    background : red ;    width : 40px ;    height : 90px ;    bottom : -14px ;    right : -37px ;    border : 14px solid #eee ;    border-radius: 25px ; } #faceb ook-icon::after {    content : "/20" ;    position : absolute ;    width : 55px ;    top : 50px ;    height : 14px ;    background : #eee ;    right : 5px ; }

Moon

 
#moon {    width : 80px ;    height : 80px ;    border-radius: 50% ;    box-shadow: 15px 15px 0 0 red ; }

flag

 
#flag {    width : 110px ;    height : 56px ;    padding-top : 15px ;    position : relative ;    background : red ;    color : white ;    font-size : 11px ;    letter-spacing : 0.2em ;    text-align : center ;    text-transform : uppercase ; } #flag:after {    content : "" ;    position : absolute ;    left : 0 ;    bottom : 0 ;    width : 0 ;    height : 0 ;    border-bottom : 13px solid #eee ;    border-left : 55px solid transparent ;    border-right : 55px solid transparent ; }

Cone

 
#cone {    width : 0 ;    height : 0 ;    border-left : 70px solid transparent ;    border-right : 70px solid transparent ;    border-top : 100px solid red ;    -moz-border-radius: 50% ;    -webkit-border-radius: 50% ;    border-radius: 50% ; }

Cross

 
# cross {    background : red ;    height : 100px ;    position : relative ;    width : 14px ; } #cross:after {    background : red ;    content : "" ;    height : 14px ;    left : -40px ;    position : absolute ;    top : 40px ;    width : 100px ; }

Base

 
#base {    background : red ;    display : inline- block ;    height : 55px ;    margin-left : 14px ;    margin-top : 55px ;      position : relative ;      width : 100px ; } #base:before {    border-bottom : 35px solid red ;    border-left : 50px solid transparent ;    border-right : 50px solid transparent ;    content : "" ;    height : 0 ;    left : 0 ;    position : absolute ;    top : -35px ;    width : 0 ; }
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄