html 绘制不规则图形,css3创建多边形clip属性，可用来绘制不规则图形了

.path1 {

clip-path: polygon(5px 10px, 16px 3px, 16px 17px);

}

.path2 {

clip-path: polygon(3px 5px, 17px 5px, 10px 16px);

}

.path3 {

clip-path: polygon(5px 10px, 16px 3px, 16px 10px, 26px 10px, 26px 3px, 37px 10px, 26px 17px, 26px 10px, 16px 10px, 16px 17px);

}

.path4 {

clip-path: polygon(5px 10px, 16px 3px, 16px 10px, 36px 10px, 36px 3px, 47px 10px, 36px 17px, 36px 10px, 16px 10px, 16px 17px);

}

.path5 {

clip-path: polygon(5px 10px, 16px 3px, 16px 9px, 36px 9px, 36px 3px, 47px 10px, 36px 17px, 36px 10px, 16px 10px, 16px 17px);

}

.path6 {

clip-path: polygon(5px 10px, 16px 3px, 16px 9px, 36px 9px, 36px 3px, 47px 10px, 36px 17px, 36px 11px, 16px 11px, 16px 17px);

}

.path7 {

clip-path: polygon(5px 11px, 5px 9px, 16px 3px, 26px 3px, 40px 9px, 48px 15px, 48px 5px, 40px 11px, 26px 17px, 16px 17px);

}

可参考https://www.w3cplus.com/css3/creating-responsive-shapes-with-clip-path.html

和张鑫旭的文章

clip-path现在改为了clip

本文来源于网络：查看 >https://www.cnblogs.com/PeggyChan/p/7704858.html