CSS3绘制各类图形总结

https://codepen.io/anon/pen/QZmyNp

 

 

<div id="oval"></div>
<div id='triangle0'></div>
<div id='triangle1'></div>
<div id="normalarrow"></div>
<div id="curvedarrow"></div>
<div id="trapezoid"></div>
<div id="parallelogram"></div>

 

div {
  display: inline-block;
  margin-right: 10px;
}
#oval {
  /* '/'前面的值设置其水平半径,'/'后面值设置其垂直半径 */
  border-radius: 50px/25px;
  height:50px;
  width:100px;
  background: red;
}
#triangle0 {
  height: 0;
  width: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid red;
}
#triangle1 {
  height: 0;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid red;
}
#normalarrow {
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  transform: rotate(10deg);
   -ms-transform:rotate(10deg);     /* IE 9 */
   -moz-transform:rotate(10deg);     /* Firefox */ 
   -webkit-transform:rotate(10deg); /* Safari 和 Chrome */ 
  -o-transform:rotate(10deg);     /* Opera */ 
}
#normalarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transoarent;
  border-top: 2px solid red;
  top: -11px;
  left: -9px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  -ms-transform:rotate(45deg);     /* IE 9 */
  -moz-transform:rotate(45deg);     /* Firefox */ 
  -webkit-transform:rotate(45deg); /* Safari 和 Chrome */ 
  -o-transform:rotate(45deg);     /* Opera */ 
}
#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  transform: rotate(10deg);
   -ms-transform:rotate(10deg);     /* IE 9 */
   -moz-transform:rotate(10deg);     /* Firefox */ 
   -webkit-transform:rotate(10deg); /* Safari 和 Chrome */ 
  -o-transform:rotate(10deg);     /* Opera */ 
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transoarent;
  border-top: 2px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  -ms-transform:rotate(45deg);     /* IE 9 */
  -moz-transform:rotate(45deg);     /* Firefox */ 
  -webkit-transform:rotate(45deg); /* Safari 和 Chrome */ 
  -o-transform:rotate(45deg);     /* Opera */ 
}
#trapezoid {
  border-bottom: 50px solid red;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 50px;
}
#parallelogram {
  width: 100px;
  height: 50px;
/* skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。  */
  transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  background: red;
}

 

参考：

https://blog.csdn.net/acm765152844/article/details/51417562

http://www.cnblogs.com/liyunhua/p/4533581.html