为什么突然想起写这篇文章呢？当时看到效果图第一反应是切图，用图片制作。后来发现，这样问题多？网页的反应时间也变长了，不符合实际开发需求，这篇文章也是写给我自己的。也算是有点东西吧，大家有用就拿去用，没用看看就好。
正方形
.square1{
width: 100px;
height: 100px;
background: #FF00D4;
}
/* 上面的方法是设置宽度和高度一致就可以实现正方形的效果，下面是用边框border制作正方形 */
.square2{
width: 0;
height: 0;
border: 50px solid #FF00D4; /*边框大小等于正方形宽度（或高度）的一半*/
}
三角形（）
.triangle1{
width: 0;
height: 0;
border:50px solid #FF00D4;
border-color: #FF00D4 transparent transparent; /*上、左右、下*/
/* border-top: 50px solid #FF00D4;
border-left:50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;*/
}
.triangle2{
width: 0;
height: 0;
border: 50px solid #FF00D4;
border-color: transparent #FF00D4 transparent transparent;/*上、右、下、左 */
}
.triangle3{
width: 0;
height: 0;
border-bottom: 100px solid #FF00D4;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
.triangle9{
width: 0;
height: 0;
border-top: 50px solid #FF00D4;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
transform: rotate(35deg);
}
六角星
原理：通过两个三角形定位叠加在一起组合成六角星
.liujiaoxing{
width: 0;
height: 0;
border-top: 100px solid #FF00D4;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
position: relative;
}
.liujiaoxing:after{
content: "";
position: absolute;
left:-50px;
top: -130px;
width: 0;
height: 0;
border-bottom: 100px solid #FF00D4;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
心形
.xinxing{
width: 100px;
height: 100px;
background: #FF00D4;
position: relative;
transform: rotate(45deg);
}
.xinxing::before{
content: "";
position: absolute;
left: -50px;
top: 0;
width: 50px;
height: 100px;
background: #FF00D4;
border-radius: 50px 0 0 50px;
}
.xinxing::after{
content:"";
position: absolute;
left: 0px;
top: -50px;
width: 100px;
height: 50px;
background: #FF00D4;
border-radius: 50px 50px 0 0;
}
其实这些东西说简单也简单，说难也难，主要是看有没有想到关键点上。基础图形无非就是把border加上宽度，让border属性从一条线变成一条较款的线。三角形，三角形看你要那条边，你就把那条边的属性写出来，究竟实在border上写transparent还是在border-left上面写，都可以。这就是我的粗浅理解 ，要是有什么错误，欢迎大家提出来。
