CSS 之剪切横幅

简述

clip-path属性指定一个应用到元素上的剪切路径。应用在SVG中<clipPath>元素上的属性值可以完全运用在clip-path属性上。还可以使用CSS Shapes模块中的基本形状来定义剪切路径。这些形状可以使用形状函数来创建。这些形状态函数包括polygon()、circle()、inset()(用来定义嵌入的矩形)和ellipse()。

使用clip-path属性将一个剪切路径运用在一个元素上非常的简单,下面我们来看一个剪切实现。

| 版权声明:一去、二三里,未经博主允许不得转载。

剪切

效果

这里写图片描述

通过clip-path我们可以设置一个剪切路径,polygon表示多边形。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>剪切横幅</title>

<style type='text/css'>
div {
  width: 250px;
  padding: 9px 0 9px 5%;
  color: #fff;
  background-color: #d32f36;
  -webkit-clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
}
</style>

</head>
<body>
  <div>剪切横幅</div>
</body>
</html>

分析

我们先看下图

这里写图片描述

坐标横坐标和纵坐标起点均是从0开始,最大值为100%。

图中标识出的顺序依次对应polygon的坐标,polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%)。

即:

1 - 坐标点:0 0
2 - 坐标点:100% 0
3 - 坐标点:95% 50%
4 - 坐标点:100% 100%
5 - 坐标点:0 100%
6 - 坐标点:5% 50%

展开阅读全文
©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值