CSS - 纯css设置32种图形

整理一下使用纯CSS来制作常用的各种图形。一般采用一个标签。

1. 正方形（square）:
   CSS Code:

.square {
  width: 100px;
  height: 100px;
  background: red;
}

使用border制作正方形：

.square {
  width: 0;
  height: 0;
  border: 50px solid red;  /*边框大小等于正方形宽度（或高度）的一半*/
}

2. 平行四边形（parallelogram）
   CSS Code:

.paralelogtam {
  width: 100px;
  height: 70px;
  transform: skew(20deg);
  // transform: skew(-20deg);
  backgroud: red;
}

3. 菱形（diamond）
   CSS Code:

.diamond {
  width: 80px;
  height: 80px;
  margin: 40px 0 0 40px;
  transform: rotate(-45deg);
  transform-oringin: 0,100%;
  background: red;
}

4. 长方形
5. 梯形（trapezoid）
   CSS Code:

.trapezoid-1 {
 width: 100px;
 height: 0px;
 border-bottom: 100px solid red;
 // border-top: 100px solid red;
 border-left: 60px solid transparent;
 border-right: 60px solid transparent;
}

.trapezoid-2 {
 width: 0px;
 height: 100px;
 border-left: 100px solid red;
 // border-right: 100px solid red;
 border-top: 60px solid transparent;
 border-bottom: 60px solid transparent;
}

6. 三角形（triangle）
   CSS Code:

.triangle-up {
  width: 0;
  height: 0;
  border: 50px solid red;
  //上三角
  border-color: transparent transparent red transparent;
  //下三角
  border-color: red transparent transparent transparent;
  //左三角
  border-color: transparent red transparent transparent;
  //下三角
  border-color: transparent transparent transparent red;
}

7. 半圆（semicircle）
   CSS Code:

.semicircle{
 background: red;
 width: 50px;
 height: 25px;
 //上半圆
 border-radius: 50px 50px 0 0;
 //下半圆
 border-radius: 0 0 50px 50px;
}

.semicircle{
 background: red;
 width: 25px;
 height: 50px;
 //左半圆
 border-radius: 50px 0 0 50px;
 //右半圆
 border-radius: 0 50px 50px 0;
}

8. 圆（circle）
9. 椭圆（oval）

.ovalHor-1 {
 background: red;
 width: 80px;
 height: 40px;
 border-radius: 40px/20px;
}

.ovalHor-2 {
 background: red;
 width: 40px;
 height: 80px;
 border-radius: 20px/40px;
}

10. 表图（chartColorful）
    CSS Code:

.chartColorful {
  width: 0;
  height: 0;
  border: 50px solid red;
  border-color: purple red yellow orange;
  border-radius: 50px;
}

11. 四分之一圆（quarterCircle）
12. Chart(quartCircle)
13. 心形（heart）
    CSS Code:

.heartLeft {
	width:0;
	height:0;
	border-color:red;
	border-style:dotted;
	border-width:0 40px 40px 0;
	//border-width: 0 0 40px 40px;
}

14. 彩带（ribbon）
    CSS Code:

.ribbon {
	width:0;
	height:100px;
	border-left:50px solid red;
	border-right:50px solid red;
	border-bottom:35px solid transparent;
}