纯用CSS定义写出来的图形写法教程(6)

#burst-8 {

background: red;

width: 80px;

height: 80px;

position: relative;

text-align: center;

-webkit-transform: rotate(20deg);

-moz-transform: rotate(20deg);

-ms-transform: rotate(20deg);

-o-transform: rotate(20eg);

transform: rotate(20deg);

}

#burst-8:before {

content: "";

position: absolute;

top: 0;

left: 0;

height: 80px;

width: 80px;

background: red;

-webkit-transform: rotate(135deg);

-moz-transform: rotate(135deg);

-ms-transform: rotate(135deg);

-o-transform: rotate(135deg);

transform: rotate(135deg);

}

19.钻石

#cut-diamond {

border-style: solid;

border-color: transparent transparent red transparent;

border-width: 0 25px 25px 25px;

height: 0;

width: 50px;

position: relative;

margin: 20px 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;

}

20.八卦