一、前言

今天在学习threejs的路上，见到了一个threejs打造的赛博朋克2077基地，除了里面用到的threejs技术外，css的部分也是不容小觑，今天就来说说这个clip-path属性吧。

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。

往往能实现出惊艳的效果。

下面我们从四个常用的属性来试试效果。

二、四属性

1、inset矩形

定义上是： clip-path: inset(<距离元素上面的距离>,<距离元素右面的距离> ,<距离元素下面的距离>,<距离元素左面的距离>,<圆角边框> ）

css属性值

position: absolute;
left: 10px;
top: 200px;
width: 100px;
height: 100px;
background: #eb4f4f;
clip-path: inset(2px 2px 20px 20px round 10px);

还挺好理解的，就是类似padding、margin的用法，加上border-radius的用法组合在一起。

2、circle圆形

定义上是：clip-path: circle(圆的半径 at 圆心)

css属性值，其余跟上述一致。

clip-path: circle(40px at 50% 50%);

border-radius为50%的时候也能实现一个圆，但是圆心默认为中心，圆半径为宽度一半，不像这里可以随意指定圆半径和圆心位置。

3、ellipse椭圆

定义上是：clip-path: ellipse(圆的水平半径圆的垂直半径 at 圆心)

css属性

clip-path: ellipse(20px 45px at 50% 50%)

使用上跟circle差不多，就是椭圆需要确定两个半径而已。

4、polygon多边形

这里是就是我从文章末尾附的链接里得到的灵感，多边形的描绘，可以让我们不再受限于规规矩矩的图形，可以自由发挥，也可以解燃眉之急（比如一些简单的多边形，ui不肯给图），当然太复杂的还是直接用图片代替吧，这样省事。下面我们继续讲讲。

定义上是：clip-path: polygon(<距离左上角的X轴长度距离左上角Y轴的长度>，<距离左上角的X轴长度距离左上角Y轴的长度>，<距离左上角的X轴长度距离左上角Y轴的长度>)

通俗点讲就是，里面是至少3个点，这些点按顺序圈起来的部分，就是能看到的部分。

先来个简单的三角形，因为宽高是100px x 100px，所以就有了下面这样的写法。

clip-path: polygon(50px 0, 0 100px, 100px 100px);

再来个五角星，这里用了百分比，就不需要担心改变尺寸后需要重新描述点的位置了。

clip-path: polygon(50% 0, 40% 30%, 0 31%, 33% 50%, 20% 100%, 50% 70%, calc(100% - 20%) 100%, calc(100% - 33%) 50%, 100% 31%, calc(100% - 40%) 30%);

其实就是连线而已，难度在于坐标点的计算。

仿下面老哥的实现

我们将宽高变更为368x305（偷个懒，直接用老哥的属性），然后再增加黑色边框

position: absolute;
left: 10px;
top: 200px;
width: 368px;
height: 305px;
background: #eb4f4f;
border-top: 30px solid #000;
border-bottom: 24px solid #000;
border-left: 5px solid #000;
border-right: 5px solid #000;

增加完是这样的，宽高就加上边框的宽度。

然后我们加上clip-path属性

clip-path: polygon(0 25px,26px 0,calc(60% - 25px) 0,60% 25px,100% 25px,100% calc(100% - 10px),calc(100% - 15px) calc(100% - 10px),calc(80% - 10px) calc(100% - 10px),calc(80% - 15px) 100%,80px 100%,65px calc(100% - 15px),0 calc(100% - 15px));

就变成下面这种样子了，是不是很神奇，平时这样子不规则的图形，我们一般只能用图片代替，没想到能直接用css写出来。

附1: 实心点状背景

在上述css代码里添加这两个

background-image: radial-gradient(rgba(0,0,0,.2) 5px,transparent 0);
background-size: 10px 10px;

就能得到这样的效果

附2：本文灵感来源，感兴趣的可以看看，下面那老哥写的有点nb

参考文章地址：使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏

在线预览地址：赛博朋克2077地球大屏

ps：我是地霊殿__三無，期待与你一同成长。

clip-path属性深入使用