HTML之CSS画三角形原理,HTML/CSS CSS3 画三角形

div{

float:left;

margin-bottom:10px;

margin-left:10px;

}

.div1{

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

.div2{

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid red;

}

.div3{

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 100px solid red;

border-bottom: 50px solid transparent;

}

.div4{

width: 0;

height: 0;

border-top: 50px solid transparent;

border-left: 100px solid red;

border-bottom: 50px solid transparent;

}

.div5{

width: 0;

height: 0;

border-top: 100px solid red;

border-right: 100px solid transparent;

}

.div6{

width: 0;

height: 0;

border-top: 100px solid red;

border-left: 100px solid transparent;

}

.div7{

width: 0;

height: 0;

border-bottom: 100px solid red;

border-right: 100px solid transparent;

}

.div8{

width: 0;

height: 0;

border-bottom: 100px solid red;

border-left: 100px solid transparent;

}

.div9{

position: relative;

width: 0;

height: 0;

border-top: 9px solid transparent;

border-right: 9px solid red;

-webkit-transform: rotate(10deg);

-moz-transform: rotate(10deg);

-ms-transform: rotate(10deg);

-o-transform: rotate(10deg);

}

.div9:after{

content: "";

position: absolute;

border: 0 solid transparent;

border-top: 3px solid red;

border-radius: 20px 0 0 0;

top: -12px; left: -9px;

width: 12px;

height: 12px;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

}

Triangle

Up

Triangle

Down

Triangle

Left

Triangle

Right

Triangle Top

Left

Triangle Top

Right

Triangle

Bottom Left

Triangle

Bottom Right

class="div9">