css画梯形，css画五角星， css画六角星 ，css画六边形

css画梯形

.triangle {

border-bottom: 100px solid #F36823;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

height: 0px;

width: 100px;

}

css画五角星

.triangle{

margin: 50px 0;

position: relative;

display: block;

color: #F36823;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid #F36823;

border-left: 100px solid transparent;

-moz-transform: rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

}

.triangle:before {

border-bottom: 80px solid #F36823;

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);

}

.triangle:after {

position: absolute;

display: block;

color: #F36823;

top: 3px;

left: -105px;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid #F36823;

border-left: 100px solid transparent;

-webkit-transform: rotate(-70deg);

-moz-transform: rotate(-70deg);

-ms-transform: rotate(-70deg);

-o-transform: rotate(-70deg);

content: '';

}

css画六角星

.triangle{

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

position: relative;

}

.triangle:after{

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid red;

position: absolute;

content: "";

top: 30px;

left: -50px;

}

css画六边形

.triangle{

width: 100px;

height: 55px;

background: #F36823;

position: relative;

}

.triangle: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 #F36823;

}

.triangle: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 #F36823;

}