CSS3特殊图形制作

1、三角形 

//html
<div class="triangleBox">
    <div class="triangle"></div>
    <div class="triangle1"></div>
    <div class="triangle2"></div>
    <div class="triangle3"></div>
    <div class="triangle4"></div>
    <div class="triangle5"></div>
    <div class="triangle6"></div>
    <div class="triangle7"></div>
    <div class="triangle8"></div>
</div>

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

.triangle1 {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #3a8ee6;
}

.triangle2 {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 100px solid #3a8ee6;
}

.triangle3 {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 100px solid #3a8ee6;
}

.triangle4 {
    width: 0;
    height: 0;
    border-top: 100px solid #3a8ee6;
    border-right: 100px solid transparent;
}

.triangle5 {
    width: 0;
    height: 0;
    border-top: 100px solid #3a8ee6;
    border-left: 100px solid transparent;
}

.triangle6 {
    width: 0;
    height: 0;
    border-bottom: 100px solid #3a8ee6;
    border-left: 100px solid transparent;
}

.triangle7 {
    width: 0;
    height: 0;
    border-bottom: 100px solid #3a8ee6;
    border-right: 100px solid transparent;
}

.triangle8 {
    width: 50px;
    border-width: 50px;
    border-style: solid;
    border-color: #3a8ee6 transparent transparent transparent;
    box-sizing: border-box;
}

2、圆形

//html
<div class="triangleBox">
    <div class="roundness"></div>
    <div class="roundness1"></div>
    <div class="roundness2"></div>
    <div class="roundness3"></div>
    <div class="roundness4"></div>
    <div class="roundness5"></div>
    <div class="roundness6"></div>
    <div class="roundness7"></div>
    <div class="roundness8"></div>
    <br>
    <div class="roundness9"></div>
    <div class="roundness10"></div>
    <div class="roundness11"></div>
    <div class="roundness12"></div>
    <div class="roundness13"></div>
    <div class="roundness14"></div>
    <div class="roundness15"></div>
    <div class="roundness16"></div>
    <div class="cloverBox">
        <div class="roundness17"></div>
        <div class="roundness18"></div>
        <div class="roundness19"></div>
        <div class="roundness20"></div>
    </div>
    <div class="roundness21"></div>
</div>

//css
.roundness {
    width: 120px;
    height: 120px;
    background: #3a8ee6;
    border-radius: 100%;
}

.roundness1 {
    width: 100px;
    height: 100px;
    border: 5px solid #3a8ee6;
    background: #fff;
    border-radius: 100%;
}

.roundness2 {
    width: 60px;
    height: 120px;
    background: #3a8ee6;
    border-radius: 60px 0 0 60px;

}

.roundness3 {
    width: 60px;
    height: 120px;
    background: #3a8ee6;
    border-radius: 0 60px 60px 0;

}

.roundness4 {
    width: 120px;
    height: 60px;
    background: #3a8ee6;
    border-radius: 60px 60px 0 0;
}

.roundness5 {
    width: 120px;
    height: 60px;
    background: #3a8ee6;
    border-radius: 0 0 60px 60px;
}

.roundness6,
.roundness7,
.roundness8,
.roundness9 {
    width: 60px;
    height: 60px;
    background: #3a8ee6;
}

.roundness6 {
    border-radius: 60px 0 0 0;
}

.roundness7 {
    border-radius: 0 60px 0 0;
}

.roundness8 {
    border-radius: 0 0 0 60px;
}

.roundness9 {
    border-radius: 0 0 60px 0;
}

.roundness10,
.roundness11,
.roundness12,
.roundness13 {
    width: 60px;
    height: 60px;
    background: #3a8ee6;
}

.roundness10 {
    border-radius: 0 30px;
}

.roundness11 {
    border-radius: 30px 0;
}

.roundness12 {
    border-radius: 0 60px;
}

.roundness13 {
    border-radius: 60px 0;
}

.roundness14 {
    width: 0;
    height: 0;
    border-bottom: 30px solid #3a8ee6;
    border-left: 30px solid #3a8ee6;
    border-right: 30px solid transparent;
    border-top: 30px solid #3a8ee6;
    border-radius: 30px;
}

.roundness15 {
    width: 50px;
    height: 80px;
    background: #3a8ee6;
    border-radius: 60px 60px 60px 60px/100px 100px 60px 60px;
}

.roundness16 {
    width: 60px;
    height: 60px;
    background: #3a8ee6;
    border-radius: 0 60px 60px 60px;
}

.cloverBox {
    width: 105px;
}

.roundness17,
.roundness18,
.roundness19,
.roundness20 {
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    background: #3a8ee6;
}

.roundness17 {
    border-radius: 50px 50px 0 50px;
    margin: 0 5px 5px 0;
}

.roundness18 {
    border-radius: 50px 50px 50px 0;
}

.roundness19 {
    border-radius: 50px 0 50px 50px;
    margin-right: 5px;
}

.roundness20 {
    border-radius: 0 50px 50px 50px;
}

.roundness21 {
    width: 168px;
    height: 84px;
    position: relative;
}

.roundness21::before,
.roundness21::after {
    content: "";
    width: 80px;
    height: 80px;
    border: 2px solid #3a8ee6;
    position: absolute;
    bottom: 0;
}

.roundness21::before {
    border-radius: 40px 40px 0 40px;
    left: 0;
    transform: rotate(-45deg);
}

.roundness21::after {
    border-radius: 40px 40px 40px 0;
    left: 116px;
    transform: rotate(45deg)
}

3.平形四边形

//html
<div class="quadrilateral"> </div>

//css
.quadrilateral {
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    position: relative;
    top: 50px;
    left: 25px;
    color: #fff;
}

.quadrilateral::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: skew(45deg);
    z-index: -5;
    background-color: #3a8ee6;
}

4、梯形

//html
<div class="trapezoid"></div>

//css
.trapezoid {
    margin-top: 80px;
    border-bottom: 100px solid #3a8ee6;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

5、八卦

//html
<div class="gossip"></div>

//css
.gossip {
    position: relative;
    top: 15px;
    width: 100px;
    height: 0;
    border-top: 50px solid #ffffff;
    border-bottom: 50px solid #000000;
    border-radius: 50%;
    box-shadow: 1px 0 0px 1px #000000;
    overflow: visible;
}

.gossip::before {
    position: absolute;
    content: '';
    left: 0;
    top: -25px;
    width: 10px;
    height: 10px;
    border: 20px solid #000000;
    background: #ffffff;
    border-radius: 50%;
}

.gossip::after {
    position: absolute;
    content: '';
    left: 50px;
    top: -25px;
    width: 10px;
    height: 10px;
    border: 20px solid #ffffff;
    background-color: #000000;
    border-radius: 50%;
}

6、五角星

//html
 <div class="fivePointedStar"></div>
//css
.fivePointedStar {
    margin: 50px 0;
    position: relative;
    display: block;
    color: #3a8ee6;
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #3a8ee6;
    border-left: 100px solid transparent;
    transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}

.fivePointedStar::before {
    border-bottom: 80px solid #3a8ee6;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -45px;
    left: -65px;
    display: block;
    content: '';
    transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);

}

.fivePointedStar::after {
    position: absolute;
    display: block;
    color: #3a8ee6;
    top: 3px;
    left: -105px;
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #3a8ee6;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
    content: '';
}

7、六角星

//html
<div class="hexagram"></div>

//css
.hexagram {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #3a8ee6;
    position: relative;
}

.hexagram::after {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #3a8ee6;
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
}

8、五边形

//html
<div class="pentagon"></div>

//css
.pentagon {
    position: relative;
    top: 80px;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #3a8ee6 transparent;
}

.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 #3a8ee6;
}

9、六边形

//html
<div class="hexagon"></div>

//css
.hexagon {
    width: 100px;
    height: 55px;
    background: #3a8ee6;
    position: relative;
    top: 120px;
}

.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 #3a8ee6;
}

.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 #3a8ee6;
}

10、八边形

//html
<div class="octagon"></div>

//css
.octagon {
    width: 100px;
    height: 100px;
    background: #3a8ee6;
    position: relative;
    top: 150px;
}

.octagon::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid #3a8ee6;
    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 #3a8ee6;
    border-left: 29px solid #fff;
    border-right: 29px solid #fff;
    width: 42px;
    height: 0;
}

11、8角星

//html
<div class="AngleStar8"></div>

//css
.AngleStar8 {
    background: #3a8ee6;
    width: 80px;
    height: 80px;
    position: relative;
    top: 170px;
    left: 15px;
    text-align: center;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20eg);
    transform: rotate(20deg);
}

.AngleStar8::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: #3a8ee6;
    ;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

12、12角星

//html
<div class="AngleStar"></div>

//css
.AngleStar {
    background: #3a8ee6;
    width: 80px;
    height: 80px;
    position: relative;
    top: 200px;
    left: 15px;
    text-align: center;
}

.AngleStar::before,
.AngleStar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: #3a8ee6;
}

.AngleStar::before {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

.AngleStar:after {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}

13、钻石

//html
<div class="diamond"></div>    

//css
.diamond {
    border-style: solid;
    border-color: transparent transparent #3a8ee6 transparent;
    border-width: 0 25px 25px 25px;
    height: 0;
    width: 50px;
    position: relative;
    top: 230px;
    margin: 20px 0 50px 0;
}

.diamond:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #3a8ee6 transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

14、提示对话框

//html
<div class="promptDialogBox"></div>    

//css
.promptDialogBox {
    width: 120px;
    height: 80px;
    background: #3a8ee6;
    position: relative;
    top: 260px;
    left: 20px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.promptDialogBox::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 26px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 26px solid #3a8ee6;
    border-bottom: 13px solid transparent;
}

15、提示对话框下面

//html
<div class="tip"></div>    

//css
.tip {
    width: 20rem;
    height: 4rem;
    background: #3a8ee6;
    position: relative;
    top: 300px;
    margin-bottom: 5rem;
    border-radius: 10px;
}

.tip::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 4rem;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-top: 26px solid #3a8ee6;
    border-right: 13px solid transparent;
}

16、爱心

//html
<div class="love"></div>
//css
.love {
    position: relative;
    top: 300px;
    width: 100px;
    height: 90px;
}

.love:before,
.love:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #3a8ee6;
    -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%;
}

.love: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%;
}