用CSS绘制最常见的40种形状和图形，0基础前端开发

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 25px solid red;

}

#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 red;

}

Octagon(八边形)

---

#octagon {

width: 100px;

height: 100px;

background: red;

position: relative;

}

#octagon:before {

content: “”;

position: absolute;

top: 0;

left: 0;

border-bottom: 29px solid red;

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

border-left: 29px solid #fff;

border-right: 29px solid #fff;

width: 42px;

height: 0;

}

Heart(心形)

---

#heart {

position: relative;

width: 100px;

height: 90px;

}

#heart:before,

#heart:after {

position: absolute;

content: “”;

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

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

}

#heart: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%;

}

Infinity(无限符图形)

---

#infinity {

position: relative;

width: 212px;

height: 100px;

}

#infinity:before,

#infinity:after {

content: “”;

position: absolute;

top: 0;

left: 0;

width: 60px;

height: 60px;

border: 20px solid red;

-moz-border-radius: 50px 50px 0 50px;

border-radius: 50px 50px 0 50px;

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

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

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

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

transform: rotate(-45deg);

}

#infinity:after {

left: auto;

right: 0;

-moz-border-radius: 50px 50px 50px 0;

border-radius: 50px 50px 50px 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

}

Diamond Square(菱形)

---

#diamond {

width: 0;

height: 0;

border: 50px solid transparent;

border-bottom-color: red;

position: relative;

top: -50px;

}

#diamond:after {

content: ‘’;

position: absolute;

left: -50px;

top: 50px;

width: 0;

height: 0;

border: 50px solid transparent;

border-top-color: red;

}

Diamond Shield（钻石盾牌）

---

#diamond-shield {

width: 0;

height: 0;

border: 50px solid transparent;

border-bottom: 20px solid red;

position: relative;

top: -50px;

}

#diamond-shield:after {

content: ‘’;

position: absolute;

left: -50px; top: 20px;

width: 0;

height: 0;

border: 50px solid transparent;

border-t