CSS制作基础图形

为什么突然想起写这篇文章呢？当时看到效果图第一反应是切图，用图片制作。后来发现，这样问题多？网页的反应时间也变长了，不符合实际开发需求，这篇文章也是写给我自己的。也算是有点东西吧，大家有用就拿去用，没用看看就好。

正方形

.square1{

width: 100px;

height: 100px;

background: #FF00D4;

}

/* 上面的方法是设置宽度和高度一致就可以实现正方形的效果，下面是用边框border制作正方形 */

.square2{

width: 0;

height: 0;

border: 50px solid #FF00D4; /*边框大小等于正方形宽度（或高度）的一半*/

}

图片发自App

三角形（）

.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;*/

}

图片发自App

.triangle2{

width: 0;

height: 0;

border: 50px solid #FF00D4;

border-color: transparent #FF00D4 transparent transparent;/*上、右、下、左 */

}

图片发自App

.triangle3{

width: 0;

height: 0;

border-bottom: 100px solid #FF00D4;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

}

图片发自App

钝角

.triangle9{

width: 0;

height: 0;

border-top: 50px solid #FF00D4;

border-left: 70px solid transparent;

border-right: 70px solid transparent;

transform: rotate(35deg);

}

图片发自App

六角星

原理：通过两个三角形定位叠加在一起组合成六角星

.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;

}

图片发自App

心形

.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;

}

图片发自App

    其实这些东西说简单也简单，说难也难，主要是看有没有想到关键点上。基础图形无非就是把border加上宽度，让border属性从一条线变成一条较款的线。三角形，三角形看你要那条边，你就把那条边的属性写出来，究竟实在border上写transparent还是在border-left上面写，都可以。这就是我的粗浅理解 ，要是有什么错误，欢迎大家提出来。