likes
comments
collection
share

你可能还不知道的CSS好用属性:clip-path

作者站长头像
站长
· 阅读数 45

如何用 css 实现三角形?

你是不是还在用这种方式,利用 border 的 color 属性来实现三角形。

你可能还不知道的CSS好用属性:clip-path

.triangle {
    width: 0;
    height: 0;
    border: 5px solid #000;
    border-color: transparent transparent #000 transparent;
}

今天给大家介绍一个 css 中的一个不是很常用的属性 clip-path 来实现一个三角形。

你可能还不知道的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 路径。用法如下:

你可能还不知道的CSS好用属性:clip-path

<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%);

你可能还不知道的CSS好用属性:clip-path

insert 可实现的动画—— loading 加载中

你可能还不知道的CSS好用属性:clip-path

不知道你有没有看到过这样的 loading 效果,在没了解 clip-path 之前,可能会让 U 同学来个动图,然后来实现这样的效果,但是接触到 clip-path 以后,只要脑洞够大,很多效果可以利用纯 css 去实现。 实现思路:

  • 利用 clip-path 对边框进行裁剪
  • 流动感通过裁剪位置随机来实现
  • 渐变颜色动画则是利 filter: hue-rotate(); 属性值参考文章 来实现。

你可能还不知道的CSS好用属性:clip-path

你可能还不知道的CSS好用属性:clip-path

你可能还不知道的CSS好用属性:clip-path

你可能还不知道的CSS好用属性:clip-path

/*主要逻辑代码示例:*/
.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% 代表圆心的位置。

你可能还不知道的CSS好用属性:clip-path

基本图形:ellipse

按椭圆剪裁,语法clip-path: ellipse(50px 60px at 0 10% 20%); at 前参数为圆心位置,at后面参数为椭圆半径。椭圆就是基于圆形变化而来,参数含义结构都是类似的,只是半径不是一个值。

你可能还不知道的CSS好用属性:clip-path

基本图形:polygon

按多边形剪裁,语法 clip-path: polygon(30% 50%,20% 10% ,20% 10%),每个具体的点位之间用『逗号』分割,每个具体的点位由(x y)组成;点位个数不限。以三角形为例说明具体数值含义:

你可能还不知道的CSS好用属性:clip-path

也正是因为 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%);

具体数值可不用自己计算,推荐网站 可以快速切出一些基本的图形,并附上具体数值。 在项目中,经常有类似导航折叠功能的按钮,学以致用,就不需要在用切图来实现啦~

你可能还不知道的CSS好用属性:clip-path

.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%);
}

兼容性

你可能还不知道的CSS好用属性:clip-path

# 一些好看的实现网站推荐 发现一个纯 `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)

segmentfault.com/a/119000002…

juejin.cn/post/708897…

转载自:https://juejin.cn/post/7163075335058096141
评论
请登录