1. 首页
  2. css

CSS有缺口的盒子

假设你试图在一个元素的角被切掉的地方产生一种设计效果。也许你是太空堡垒卡拉狄加的粉丝?或者你只是喜欢它不寻常的效果,因为它避免看起来像一个典型的矩形。当然,你可以使用多个背景在角落里放置图像。您也可以在背景中使用灵活的SVG形状。我敢打赌,还有一种奇特的方法可以使用渐变来完成它。
但是,我喜欢简单地拿些剪刀剪掉危险的角落。我们基本上可以做到这一点,多亏了clip-path。我们可以使用polygon()函数,为它提供X和Y坐标的列表,并去掉它们之外的坐标。
检查如果我们列出三个点:中上、右下、左下。
.module {clip-path:polygon(50% 0,100% 100%,0 100%);}
让我们列出所需的所有八个点,而不仅仅是三个点我们的凹角。我们可以使用像素,但那会很危险。我们可能并不知道元素的像素宽度或高度。即使我们这样做了,它也会改变。因此,这里使用的是百分比:
.module {clip-path:polygon(0% 5%,/* top left */5% 0%,/* top left */95% 0%,/* top right */100% 5%,/* top right */100% 95%,/* bottom right */95% 100%,/* bottom right */5% 100%,/* bottom left */0 95%/* bottom left */);}
这没问题,但请注意凹口不是完美的45度角。那是因为元素本身不是正方形。更糟糕的是,元素的平方越小。
我们可以使用calc()函数来解决这个问题。必要时我们会用百分数,但只要从百分数中减去就可以得到我们需要的位置和角度?这个数字重复了很多次,我们不妨把它变成一个变量。如果我们以后需要更新号码,只需更改一次,而不是更改所有的时间。
.module {–notchSize: 20px;clip-path:polygon(0% var(–notchSize),var(–notchSize) 0%,calc(100% – var(–notchSize)) 0%,100% var(–notchSize),100% calc(100% – var(–notchSize)),calc(100% – var(–notchSize)) 100%,var(–notchSize) 100%,0% calc(100% – var(–notchSize)));}
发货。
这可能不用说,但请确保您有足够的填充空间来处理剪辑。如果你真的想玩得很花哨,你也可以在填充值中使用CSS变量,所以你越刻痕,填充就越多

CSS有缺口的盒子 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%9c%89%e7%bc%ba%e5%8f%a3%e7%9a%84%e7%9b%92%e5%ad%90/