用纯css做几何图形的技巧（一）[通俗易懂]

css一般用于布局排版，不过在某些场合css也可以方便地生成几何图形，比如下面这样的图形：

几何图形的生成方案

当我们想要显示上面这些几何图形，怎么做呢？有很多种方案，一般是插入一个图片，或者用js在canvas上画一个，也可以用上次讲的图标字体来做，哪种方案好呢？其实各种做法都有优缺点：

• 图片：简单，没啥技术含量，但是要另外调用尺寸较大的图片文件，也不方便变换大小和颜色，典型的体力活儿
• canvas：优点是灵活性大，但手工绘制有点麻烦，跟图文排版混入也有些不方便
• 图标字体：形状有限，要另配字库文件，单独制作也很麻烦
• 纯CSS的解决方案：简单，快速高效，灵活，无需配合其他技术，也便于跟图文的混排，但主要靠动脑筋来解决问题，有时候弄复杂了就比较烧脑

几何图形的纯CSS解决方案

所以今天开始，我们就说一些用纯css的解决方案，从核心技术上，大致可分3种：

1、 以边框特性为核心，配合旋转和拼接

2、 以clip-path为核心的剪切手法

3、 以内联SVG为核心的解决方案

以边框特性为核心生成几何图形的原理

今天讲的是第一种方案，其原理非常有意思，我们先做一个三角形了解下：

html代码，1个div块就够了

<div class=”SanJiaoU”></div>

css代码如下:

.SanJiaoU {

border-left: 70px solid transparent;

border-right: 70px solid transparent;

border-bottom: 120px solid #e00;

}

好了，一个漂亮的三角形出现了

是不是很神奇呢？现在来说一下它的原理，你就恍然大悟了！

原理很巧妙，仔细看这个手绘图，它利用的是矩形的边框在4个角上天然形成的斜边交界，当矩形设置成宽高都是0的时候，主体没了，但还剩下边框的4个角连在一起可见，此时只要把不需要的边框部分设置成透明，剩下的就是我们要的三角了。

在前面的例子里，上下左右4条边框我们只设置了3个，其中上边框无，左右边框宽70颜色为透明，下边框宽120颜色为红色，于是就显示出红色下边框与左右透明边框交界形成的三角了，它的底边宽是70×2=140，高是120。

几何图形应用示例

原理明白了，那么刚才是正三角，倒三角怎么做呢？类推一下，显然应该是由上边框与左右透明边框来形成，也就是把 border-bottom 改成 border-top，其余不变

.SanJiaoD {

border-left: 70px solid transparent;

border-right: 70px solid transparent;

border-top: 120px solid #e00;

}

成功：

好，现在我们就开始神奇的CSS形状养成之旅吧！

我把形状一个个贴出来，你先动动脑筋看自己能不能琢磨出来，然后参考下我的css代码和提示，这个过程还是蛮有意思的。

.SanJiaoL {

border-top: 70px solid transparent;

border-bottom: 70px solid transparent;

border-right: 120px solid #e00;

}

向左的三角是以右边框为主体形成的

.SanJiaoR {

border-top: 70px solid transparent;

border-bottom: 70px solid transparent;

border-left: 120px solid #e00;

}

向右的三角是以左边框为主体形成的

嗯，看着没难度，现在变一下，直角三角形怎么弄？其实更简单，直角只需2个边框就可以构成，看看这两个图形：

.SanJiaoZUL {

border-left: 120px solid transparent;

border-bottom: 120px solid #e00;

}

.SanJiaoZUR {

border-right: 120px solid transparent;

border-bottom: 120px solid #e00;

}

倒过来呢？

.SanJiaoZDL {

border-left: 120px solid transparent;

border-top: 120px solid #e00;

}

.SanJiaoZDR {

border-right: 120px solid transparent;

border-top: 120px solid #e00;

}

稍微变通一下，试试立体的，这个是指南针形状：

/*上面2个尖*/

.SanJiaoU2 {

border-left: 20px solid transparent;

border-bottom: 90px solid #d00;

position: relative;

}

.SanJiaoU2::after {

content: “”;

border-right: 20px solid transparent;

border-bottom: 90px solid #a00;

position: absolute;

}

/*下面2个尖*/

.SanJiaoD2 {

border-left: 20px solid transparent;

border-top: 90px solid #d00;

position: relative;

}

.SanJiaoD2::after {

content: “”;

border-right: 20px solid transparent;

border-top: 90px solid #a00;

position: absolute;top:-90px;

}

原理很简单，2个直角三角形左右拼接，颜色不同，然后上下再拼接。

注意啊，这里用了after这个伪类，目的就是拼接下一个形状。由于有拼接，所以就需要通过

position和left，top这几个属性来控制2个元素的位置，详细看代码，在后面的示范中，我们会大量用到这个技巧。

.JianTou1 {

width: 80px; height: 80px;

transform: rotate(-45deg);

box-shadow: 25px 25px 0px 0 red;

}

这是一个箭头，我们先用box-shadow这个属性做一个直角，然后用 transform: rotate 旋转45度，得到这个箭头。这个技巧后面也会大量使用，请留意！

.JianTou2 {

width: 80px; height: 80px;

transform: rotate(-45deg);

box-shadow: 25px 25px 0px 0 red;

position: relative;

}

.JianTou2::after{

content: “”;

width: 80px; height: 80px;

box-shadow: 25px 25px 0px 0 red;

position: absolute;left:40px;top:40px;

}

会做一个箭头，当然就会做2个箭头，用after拼接一下就行了

.JianTou3 {

width: 160px; height: 80px;

background:

linear-gradient(-135deg, transparent 27px, #e00 0) top right,

linear-gradient( -45deg, transparent 27px, #e00 0) bottom right;

background-size: 100% 50%;

background-repeat: no-repeat;

border-radius:10px;

color:#fff;font-size: 32px;line-height: 80px;padding-left: 30px;

}

导航箭头，这个代码是用 linear-gradient 在矩形的右侧上下各切了一个角做成的。

.TiXing{

width: 90; height: 0;

border-left: 60px solid transparent;

border-right: 60px solid transparent;

border-bottom: 60px solid #e00;

}

梯形跟三角形的区别，仅仅是width非0而！

.PingXing{

width: 160px; height: 60px; margin-left: 30px;

transform: skew(-45deg);

background:#e00;

}

平行四边形，是用 transform: skew 把正常的矩形推歪一个角度即可，简单吧！

好，前面还都是比较简单的形状，现在来点复杂的

.LiuJiao{

border-left: 70px solid transparent;

border-right: 70px solid transparent;

border-top: 115px solid #e00;

position: relative;

}

.LiuJiao::after{

content: “”;

border-left: 70px solid transparent;

border-right: 70px solid transparent;

border-bottom: 115px solid #e00;

position: absolute;left:-70px;top: -155px;

}

六角形，是2个三角形，一上一下，一正一反，通过after拼接

.WuBian{

border-left: 73px solid transparent;

border-right:73px solid transparent;

border-bottom: 53px solid #e00;

position: relative;

}

.WuBian::after{

content:””; width: 90; height: 0;

border-left: 28px solid transparent;

border-right:28px solid transparent;

border-top: 86px solid #e00;

position: absolute;top:53px;left:-73px;

}

五边形，是三角形加梯形

.BaBian{

width: 140px; height: 60px;

background-color: #e00;

position: relative;

}

.BaBian::before,.BaBian::after{

content:””; width: 60; height: 0;

border-left: 40px solid transparent;

border-right:40px solid transparent;

position: absolute;

}

.BaBian::before{ top: 60px;border-top: 40px solid #e00; }

.BaBian::after { top:-40px;border-bottom: 40px solid #e00; }

八边形，我是用矩形加一前一后两个梯形，用的是before和after来拼接前后梯形。

.Xin{

width: 80px;height: 80px;

background-color: #e00;

transform: rotate(-45deg);

position: relative;left:30px;

}

.Xin::before,.Xin::after{

content: “”;width: 80px;height: 80px;

border-radius:80px;

background-color: #e00;

position: absolute;

}

.Xin::before{ left: 0px;top:-40px;}

.Xin::after { left:40px;top: 0px;}

心形，是以一个方块为核心（转45度），用before和after外加2个圆组成的，有意思吧？

.PingXingXie{

width: 160px; height: 60px;

transform: rotate(-45deg) skew(-45deg);

background:#e00;

}

斜的平行四边形，显然是rotate和 skew 两个变形处理合起来造成的。

.ShuiDi{

width: 60px; height: 60px;

border: 20px solid #e00;

border-radius: 50px 0 50px 50px;

transform: rotate(-45deg);

}

空心的水滴，看着很复杂，其实很简单，正方形的4个角，把其中3个设置成圆角，然后整体旋转45度让尖朝上就可以了，核心就是一句 border-radius: 50px 0 50px 50px; 好奇妙啊！

.ShuiDi1{

border: 50px solid #e00;

border-radius: 50px 0 50px 50px;

transform: rotate(-45deg);

}

实心的水滴，跟前面的手法略有不同，我是把正方形的边长弄成0，然后直接用边框形成的！

.ShuiDi2{

width: 60px; height: 60px;

border: 20px solid #e00;

border-radius: 50px 0 50px 50px;

transform: rotate(45deg);

}

.ShuiDi2::after{

width: 60px; height: 60px;

content: “”;

border: 20px solid #e00;

border-radius: 50px 0 50px 50px;

transform: rotate(-180deg);

position: absolute; top: -100px;left: 60px;

}

这是水滴的另一个变通使用，2个水滴拼接而成

.LingXing{

width: 100px; height: 100px;

background-color: #e00;

transform: rotate(45deg);

}

菱形，就是正方形旋转一下

.ZuanShi{

border-left: 70px solid transparent;

border-right: 70px solid transparent;

border-bottom: 40px solid #e00;

position: relative;

}

.ZuanShi::after{

content: “”;

border-left: 70px solid transparent;

border-right: 70px solid transparent;

border-top: 80px solid #e00;

position: absolute; left:-70px;top: 40px;

}

钻石，是2个三角拼接，代码有点粗暴，可能有更好的做法

.ZuanShi1{

width:70px;

border-left: 25px solid transparent;

border-right: 25px solid transparent;

border-bottom: 40px solid #e00;

position: relative;

}

.ZuanShi1::after{

content: “”;

border-left: 60px solid transparent;

border-right: 60px solid transparent;

border-top: 80px solid #e00;

position: absolute; left:-25px;top: 40px;

}

平头的钻石，是梯形和三角拼接

.JianTou{

width:10px;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 100px solid #e00;

position: relative;left:50px;

}

.JianTou::after{

content: “”;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

border-top: 20px solid #e00;

position: absolute; left:-25px;top: 100px;

}

箭头，仍然是梯形和三角的拼接，异曲同工！

.Zui{

border: 50px solid red;

border-radius: 50px;

position: relative;

transform: rotate(-45deg);

}

.zui::after{

content: “”;

width:50px;height: 50px;

background-color: #fff;

position: absolute;

}

大嘴，圆形拼接正方形（旋转）

.DunPai{

width: 120px; height: 160px;

background-color: red;

border-radius: 80% 80% 80% 80% / 20% 20% 80% 80%;

}

盾牌，通过调整border-radius圆角的弧度而形成

.MsgBox{

width: 250px;min-height:40px;

border-radius: 15px;

background-color: #e00;

position: relative;left:20px;

padding:20px;color:#fff;font-size:24px;

}

.MsgBox::after{

content: “”;

width: 20px;height: 20px;

background-color: #e00;

position: absolute; top:30px;left:-10px;

transform: rotate(-45deg);

}

聊天的气泡，圆角矩形与正方形（旋转45度）拼接

.Hua12{

width: 100px;height:100px;

background-color: #e00;

position: relative;left: 30px;

}

.Hua12::before,.Hua12::after{

content: “”;

width: 100px;height: 100px;

background-color: #e00;

position: absolute;left:0;top:0;

}

.Hua12::before{transform: rotate(30deg);}

.Hua12::after {transform: rotate(60deg);}

大红花！是3个正方形旋转角度后拼接而成

.TaiJi{

width: 160px;height: 80px;

border-radius:50%;

border: #e00 solid;

border-width: 1px 1px 80px 1px;

position: relative;left: 30px;

}

.TaiJi::before,.TaiJi::after{

content: “”;

width:20px;height: 20px;

border-radius:50%;

position: absolute;top:40px;

}

.TaiJi::before{

border:30px solid #e00;

background-color: #fff;

left:0px;

}

.TaiJi::after{

border:30px solid #fff;

background-color: #e00;

left:80px;

}

太极图，这个我可是思考了半天才想出来的，他其实是3个圆圈组成，最技巧的地方在于如何只用一个圆形做出一半阴一半阳的效果来，先卖个关子，其实代码里已经体现出来了，哈哈！

.SouSuo{

width: 80px;height: 80px;

border: 15px solid #e00;

border-radius:50%;

position: relative;

}

.SouSuo::after{

content: “”;

width: 50px;height: 15px;

background-color: #e00;

transform: rotate(45deg);

position: absolute;top:80px;left:60px;

}

搜索符号，一个圆圈加一个矩形（旋转45度）做手柄

.YueYa {

width: 80px; height: 80px;

border-radius: 50%;

box-shadow: 25px 25px 0px 0 red;

}

月牙，一个圆圈，外面加一个阴影，自然就形成了月牙状！

.ShanXing{

border-left: 80px solid transparent;

border-right: 80px solid transparent;

border-top: 100px solid red;

border-radius: 50%;

}

扇形，其实是一个边框构成的倒三角，用border-radius弄出来圆弧后，就成了扇形

.ShiZi{

width: 80px; height: 80px;

box-shadow: 25px 25px 0px 0 red;

position: relative;

}

.ShiZi::after{

content: “”;

width: 80px; height: 80px;

box-shadow: -25px -25px 0 0 red;

position: absolute;left:105px;top:105px;

}

红十字，先用box-shadow弄出L形，再用两个L形状旋转拼接而成

.Suo{

width:160px;height: 100px;

background-color: #e00;

border-radius: 20px;

position: relative;

}

.Suo::before{

content: “”;

width:60px;height: 60px;

border:20px solid #e00;

border-radius: 100px 100px 0 0;

position: absolute;left:30px;top:-80px;

}

.Suo::after{

content: “”;

width: 0px;height: 30px;

border:10px solid #fff;

border-radius: 20px;

position: absolute;left:70px;top:30px;

}

锁，是3个矩形组合而成，1个矩形做锁身，一个大圆角矩形做锁环，一个小圆角矩形做钥匙孔

.KuoHao{

width: 10px;height: 100px;

border: 10px solid #e00;border-right: 0;

border-radius: 20px 0 0 20px;

position: relative;left:50px;

}

.KuoHao::after{

content: “”;

width: 20px; height: 20px;

transform: rotate(45deg);

box-shadow: -10px 10px 0px 0 #e00;

background-color: #fff;

position: absolute;left:-5px;top:40px;

}

大括号，是半拉圆角矩形（细长），叠加一个L形尖角构成。

好了，以边框特性为核心生成几何图形的示例就到这里，主要还是以示范原理为主。实际使用中可以有更多、更巧妙的创意、更优化的代码。

关于css生成几何图形，还有以clip-path为核心的剪切手法，以及以内联SVG为核心的解决方案，我们后续另文再详细讲解，内容相信会更加精彩！