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; }
参考: