你可能还不知道的CSS好用属性:clip-path
如何用 css 实现三角形?
你是不是还在用这种方式,利用 border 的 color 属性来实现三角形。
.triangle {
width: 0;
height: 0;
border: 5px solid #000;
border-color: transparent transparent #000 transparent;
}
今天给大家介绍一个 css 中的一个不是很常用的属性 clip-path
来实现一个三角形。
.polygon {
width: 100px;
height: 100px;
background-color: red;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
了解clip-path
顾名思义,『剪裁』,它可以按照 svg 路径、盒子模型、基本多边形路径等几种不同的方式来裁切。clip-path
有几大类,分别为:
basic-shape
: 基本图形,包括inset()
、circle()
、ellipse()
、polygon()
clip-source
: 通过url()
方法引用一段SVG
的<clipPath>
来作为剪裁路径geometry-box
:单独使用时,将指定框的边缘作为剪裁路径,或者配合basic-shape
使用,用于定义剪裁的参考框(Reference Box)(由于该属性浏览器支持度比较低,本文暂不讨论)
SVG剪裁
语法:clip-path: url ()
;先定义一个svg路径,然后给元素加上clip-path: url(#id)
,其中id 为 clipPath
标签的 id。
推荐网站:svg路径生成,可通过自行拖拽生成 svg 路径。用法如下:
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path id="heart" d="M 250 500 Q 50 250 200 350 Q 200 350 300 450 Q 300 150 350 350 C 400 400 400 150 450 450 C 500 450 600 400 600 250 A 50 50 0 1 1 250 500 Z" />
</clipPath>
</defs>
</svg>
<img class="clipImg" src="https://pic.qqtn.com/up/2019-9/15690311636958128.jpg" />
.clipImg{
width: 800px;
clip-path:url(#svgPath)
}
基本图形:inset
按矩形剪裁,语法 clip-path:inset(top,right,bottom,left)
;
clip-path: inset(10% 10% 10% 10%);
insert 可实现的动画—— loading 加载中
不知道你有没有看到过这样的 loading
效果,在没了解 clip-path
之前,可能会让 U 同学来个动图,然后来实现这样的效果,但是接触到 clip-path
以后,只要脑洞够大
,很多效果可以利用纯 css 去实现。
实现思路:
- 利用 clip-path 对边框进行裁剪
- 流动感通过裁剪位置随机来实现
- 渐变颜色动画则是利
filter: hue-rotate()
; 属性值参考文章 来实现。
/*主要逻辑代码示例:*/
.border {
border: 2px solid;
border-image: linear-gradient(45deg, rgb(184, 159, 218), rgb(15, 48, 194)) 1;
clip-path: inset(0 96% 0 0);
animation: clipPath 1s infinite linear;
}
@keyframes clipPath {
0%{
clip-path: inset(0 0 96% 0);
filter: hue-rotate(0deg);
}
25% {
clip-path: inset(0 96% 0 0);
}
50% {
clip-path: inset(96% 0 0 0);
filter: hue-rotate(360deg);
}
75% {
clip-path: inset(0 0 0 96%);
}
100% {
clip-path: inset(0 0 96% 0);
filter: hue-rotate(0deg);
}
}
<div class="border">loading...</div>
基本图形:circle
按圆形剪裁,语法 clip-path:circle(50% at 50% 50%)
,at 前的50%代表半径为50% , 后面的 50% 50% 代表圆心的位置。
基本图形:ellipse
按椭圆剪裁,语法clip-path: ellipse(50px 60px at 0 10% 20%)
; at 前参数为圆心位置,at后面参数为椭圆半径。椭圆就是基于圆形变化而来,参数含义结构都是类似的,只是半径不是一个值。
基本图形:polygon
按多边形剪裁,语法 clip-path: polygon(30% 50%,20% 10% ,20% 10%)
,每个具体的点位之间用『逗号』分割,每个具体的点位由(x y)组成;点位个数不限。以三角形为例说明具体数值含义:
也正是因为 polygon
点位数不限的灵活性,可实现多种形状的剪裁,例如五角星,多边形等。
/*五角星*/
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
/*五边形*/
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
具体数值可不用自己计算,推荐网站 可以快速切出一些基本的图形,并附上具体数值。
在项目中,经常有类似导航折叠功能
的按钮,学以致用,就不需要在用切图来实现啦~
.btn {
width: 30px;
height: 120px;
background-color: #ddd;
clip-path: polygon(100% 0, 100% 100%, 0 80%, 0 20%);
display: flex;
justify-content: center;
align-items: center;
}
.icon {
width: 10px;
height: 15px;
background-color: rgb(180, 178, 178);
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
兼容性
# 一些好看的实现网站推荐 发现一个纯 `clip-path` 实现的一个比较炫酷的网站,利用三角形拼接多种生物形状 [http://species-in-pieces.com/](http://species-in-pieces.com/) # 参考文章 [https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path)转载自:https://juejin.cn/post/7163075335058096141