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

css画梯形

<div class="triangle"></div>
<style>
.triangle {
    border-bottom: 100px solid #F36823;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;

    height: 0px;
    width: 100px;
}
</style>

css画五角星

<div class="triangle"></div>

<style>
.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: '';
}
</style>

css画六角星

<style>
.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;
}
</style>

css画六边形

<div class="triangle"></div>

<style>
.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;
}
</style>