css3 繪製圖形

標籤：繪製   oct   div   color   display   idt   style   isp   otto   

星形：

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

 

 

五角星：

.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(35deg);   -webkit-transform: rotate(35deg);   -ms-transform:     rotate(35deg);   -o-transform:      rotate(35deg);}.star-five:before {   border-bottom: 80px solid red;   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: ‘‘;}

 

 五邊形：

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

 

 六邊形：

.hexagon {    width: 100px;    height: 55px;    background: #6c6;    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 #6c6;}.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 #6c6;}

 

八邊形：

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

 

 

心形：

.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(-45deg);       -moz-transform: rotate(-45deg);        -ms-transform: rotate(-45deg);         -o-transform: rotate(-45deg);            transform: rotate(-45deg);    -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(45deg);       -moz-transform: rotate(45deg);        -ms-transform: rotate(45deg);         -o-transform: rotate(45deg);            transform: rotate(45deg);    -webkit-transform-origin: 100% 100%;       -moz-transform-origin: 100% 100%;        -ms-transform-origin: 100% 100%;         -o-transform-origin: 100% 100%;            transform-origin :100% 100%;}

 

 

梯形：

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

 

css3 繪製圖形