30个案例教你⽤纯CSS实现常见的⼏何图形
本⽂会介绍⼀些常见⼏何图形的 CSS 绘制⽅案，思路参考⾃ The shapes of CSS ⼀⽂以及⽹上的其它⽂章，部分地⽅会做适当的修改和补充。
1. 三⾓形
传统 border 实现
我们知道，如果设置⼀个盒⼦的宽⾼为 0，盒⼦就会变成⼀个点。此时再给上下左右四个 border ⼀定的宽度和不同的颜⾊，那么单纯由border 填充的盒⼦看起来是这样的：
但内容盒有宽⾼的时候，四个 border 的对接处就不是⼀个点，⽽是⼀个矩形（图中⽩⾊区域），这时候的border 看起来就会和现实中的边框差不多：
因此，要绘制三⾓形，核⼼就是设置盒⼦的宽⾼为 0，让 border 表现为⼀个三⾓形：
.delta {
width: 0px;
height: 0px;
border: 50px solid;
border-color:  #43cea2 #185a9d #ff6b6b #83a4d4;
}
当然，也可以给盒⼦⼀个宽⾼，只不过这时候我们就要将其设置为 IE 盒模型（box-sizing:border-box），以确保在始终保持盒⼦原尺⼨的前提下，通过增加 border 的宽度使 border 向盒⼦内部聚拢：
.delta {
width: 100px;
height: 100px;
box-sizing: border-box;
border: 50px solid;
border-color:  #43cea2 #185a9d #ff6b6b #83a4d4;
}
上⾯两种⽅法效果⼀样，接着根据实际情况隐藏其中三个三⾓形即可。我们这⾥只想要显⽰底下的三⾓形，所以其它三⾓形通过透明⾊隐藏，顶部的三⾓形则设置 border 宽度为 0 ，避免占⽤空间。
HTML：
<div class="delta"></div>
CSS：
.delta {
width: 0px;
height: 0px;
border: 50px solid transparent;
border-bottom-color: #ff6b6b;
border-top-width: 0px;
}
效果如下：
源代码：
渐变实现
这种⽅法适合绘制直⾓三⾓形。假设要绘制⼀个红⾊的直⾓三⾓形，其实可以把它看作是⼀个矩形的⼀半，矩形从透明⾊渐变到红⾊：
div {
width: 200px;
height: 200px;
background: linear-gradient(to right bottom,transparent 0%,transparent 50%,red 50%,red 100%);
}
svg 实现
<svg width="100" height="100">
<polygon points="50,0 100,100 0,100" />
</svg>
clip-path 实现
div {
width: 100px;
height: 100px;
background: red;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
transform 和 overflow 实现
假设要绘制这个三⾓形：
先试着把他的另⼀半补齐：
可以想象成这其实是由两个盒⼦上下堆叠⽽成的，下⾯的是绿⾊盒⼦，上⾯的是蓝⾊盒⼦，这个蓝⾊盒⼦倾斜摆放，并且超出绿⾊盒⼦的部分被隐藏了。因此最初可能是类似这样的：
那么反过来想⼀下，假设我们能够实现上图这个样式，接着设法把蓝⾊盒⼦超出绿⾊盒⼦的部分隐藏，并把绿⾊盒⼦设置为透明⾊，是不是就实现了最初的那个三⾓形了呢？
从布局上，我们考虑绿⾊盒⼦是相对定位的⽗元素，蓝⾊盒⼦是⼦元素（⽤伪元素来做），并且在绝对定位和 transform 的作⽤下，实现图中的效果。接下来我们要解决⼏个问题：
蓝⾊盒⼦和绿⾊盒⼦在宽⾼上的关系？从图中可以看出，蓝⾊盒⼦的边长基本等于绿⾊盒⼦的对⾓线长度。绿⾊盒⼦宽⾼都是100px，因此对⾓线是 100√2 px，越等于 140px，因此蓝⾊盒⼦的边长就是 140px，也就是⽗盒⼦宽⾼的 140%。
蓝⾊盒⼦的绝对定位的 left 偏移多少？在绝对定位的设置上，我们可以让蓝⾊盒⼦并排放在绿⾊盒⼦左边，并且两者底边在同⼀条线上蓝⾊盒⼦旋转多少度？从图中的⼏何关系很容易看出，经过上⾯绝对定位的设置之后，蓝⾊盒⼦应该再旋转45 度才能到达图中位置。
不过这⾥要注意，蓝⾊盒⼦不是绕着⾃⼰的中⼼旋转的，⽽是绕着⾃⼰的右下⾓顶点旋转的，因此这⾥还得修改 transform-origin 的值最后，还要把超出绿⾊盒⼦的部分隐藏，并且把绿⾊盒⼦的颜⾊设置为透明⾊。因此最终代码如下：
div {
width: 100px;
height: 100px;
background: transparent;
position: relative;
overflow: hidden;
}
div::after {
content: '';
width: 140%;
height: 140%;
background-color: #185a9d;
position: absolute;
left: -140%;
bottom: 0;
transform-origin: right bottom;
transform: rotate(45deg) ;
}
源代码：
字符实现
borderbox
div::after {
content:'\25b3'
color:red
font-size: 60px
}
基本不实⽤，因为⽆法设置背景颜⾊，也⽆法设置三⾓形的形状。
多矩形堆叠实现
HTML：
<div class="container">
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
CSS：
.container {
display:flex;
flex-direction: column;
align-items: center;
div {
height:1px;
background: red;
}
}
三⾓形可以看作是多个宽度递增、⾼度极⼩的矩形⾃上⽽下堆叠在⼀起。这段代码绘制的图形接近于正三⾓形，如果要绘制直⾓三⾓形，可以设置 align-items: start，让矩形⼀致往左边靠拢。
这个⽅法基本也不实⽤，⾸先它会增加多余的 dom 结构，其次是这样的图形存在锯齿，不够美观。—— 要减少锯齿，我们可以尝试继续压缩矩形的⾼度，但这样意味着需要使⽤更多的 dom 来绘制出同等⾼度的三⾓形。
2. 椭圆形
普通椭圆
椭圆的实现依靠的是 border-radius，因此有必要搞懂 border-radius 的具体含义。
通常情况下，想要设置⼀个 div 的圆⾓，我们可能会写出类似这样的代码：
border-radius: 12px
它实际上等价于下⾯的代码：
border-top-left-radius: 12px 12px
border-top-right-radius: 12px 12px
border-bottom-left-radius: 12px 12px
border-bottom-left-radius: 12px 12px
也就是说，我们把 div 的左上⾓、右上⾓、左下⾓、右下⾓的某两个值都设置为 12px，那么这两个值是什么呢？它们其实指的是这四个⾓各⾃的⽔平半径和垂直半径。在这个例⼦中，我们的四个圆⾓，实际上都是⼀个半径为 12px 的圆的 1/4 弧。
这样我们也能理解圆的形成了。对于⼀个 100px * 100px 的 div，设置 border-radius:50%，就等于设置 div 四个⾓的⽔平半径为 div 宽的⼀半，垂直半径为 div ⾼的⼀半，这样形成的图形⼀定会是⼀个圆形。
同理，对于⼀个 200px * 100px 的 div，设置 border-radius:50%，就等于设置四个⾓的⽔平半径为 div 宽的⼀半，垂直半径为 div ⾼的⼀半，这样形成的图形⼀定会是⼀个椭圆形。
代码如下：
div {
width: 200px;
height: 100px;
background: #185a9d;
border-radius: 50%;
}
特殊椭圆（鸡蛋形）
实现⽅式和普通椭圆类似。特点在于上半部分⽐下半部分要更加扁平，因此左上⾓和右上⾓圆⾓的垂直半径要更长，这⾥取整体⾼度的60%，剩余的 40% 作为左下⾓和右下⾓圆⾓的垂直半径。代码如下：
HTML：
<div class="shape"></div>
CSS：
.shape {
width: 126px;
height: 180px;
background: #36d792;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
源代码：
3. 扇形
半圆
border-radius 实现： 先画⼀个长度为宽度两倍的矩形，再给左上⾓和右上⾓设置圆⾓即可（圆⾓半径等于宽度）
.shape {
width: 200px;
height:100px;
background: #ff6b6b;
border-radius:100px 100px 0 0;
}
overflow:hidden 实现: 让圆形的⼀半超出⽗元素并给⽗元素设置溢出隐藏
.shape {
width: 200px;
height: 100px;
overflow: hidden;
position: relative;
}
.shape::after {
content:'';
position: absolute;
width: 200px;
height: 200px;
background: #ff6b6b;
border-radius: 50%;
}
背景渐变实现（看上去是半圆）： 可以将半圆看作是⼀个圆形从有颜⾊渐变到透明⾊
.shape {
width: 200px;
height:200px;
border-radius: 50%;
background-image: linear-gradient(to bottom,#ff6b6b 50%,transparent 50%) ;
}
border-left 实现（看上去是半圆）：
.shape {
width: 200px;
height: 100px;
border-top: 100px solid #ff6b6b;
border-radius: 50%;
}
1/4 圆
border-radius实现：
.shape {
width: 120px;
height: 120px;
background: #ff6b6b;
border-top-left-radius: 100%;
}
border 实现： 类似于三⾓形的实现

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。