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>
AI 代码解读

分析

我们先看下图

这里写图片描述

坐标横坐标和纵坐标起点均是从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%

目录
打赏
0
0
0
0
57
分享
相关文章
CSS之剪切横幅
简述 clip-path属性指定一个应用到元素上的剪切路径。应用在SVG中&lt;clipPath&gt;元素上的属性值可以完全运用在clip-path属性上。还可以使用CSS Shapes模块中的基本形状来定义剪切路径。这些形状可以使用形状函数来创建。这些形状态函数包括polygon()、circle()、inset()(用来定义嵌入的矩形)和ellipse()。 使用
1281 0
|
15天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
32 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
129 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
54 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
65 34
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
89 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
119 24
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
128 7

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等