css 属性clip-path之多边形polygon小窥

最新推荐文章于 2024-04-09 14:01:48 发布

乾三_

最新推荐文章于 2024-04-09 14:01:48 发布

阅读量3k

点赞数

分类专栏： css

原文链接：https://www.cnblogs.com/leegao/p/4384499.html

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实例：
废话不多说，上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clip-path实践</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="wrap">
        <!-- title -->
        <h1>css3 clip-path</h1>
        <div class="test">
        </div>
    </div>
</body>
</html>

下面是css代码

$color:grey;
$box-size:10px;
@mixin margin_space($a,$b) {
    margin:$a auto;
    padding:$b;
}
@mixin tx_center{
    text-align:center;
}
.wrap{
    max-width:$box-size*80;
    @include margin_space(0,20px);
}
h1{
    @include tx_center;
}
.test{
    background-color:$color;
    background: url(../images/background.jpg) no-repeat;
    background-size:cover;
    max-width:$box-size*60;
    height:$box-size*40;
    @include margin_space(0,0);
    // 只看 polygon属性
    -webkit-clip-path:polygon(100px 200px,100px 300px,200px 300px,200px 200px);
        clip-path:polygon(100px 200px,100px 300px,200px 300px,200px 200px);
}

在这里插入图片描述
属性的用法：
polygon( , , …, ) 定义了每一个点的坐标，从上图也能看出，起点是从左上角开始计算的，可以用百分百，也可以用px等单位。

关键位置分析

-webkit-clip-path:polygon(100px 200px,100px 300px,200px 300px,200px 200px);

我这里设置的第一个点位置为x:100px,y:200px，第二个点的位置为x:100px,y:300px，第三个点的位置为x:200px,y:300px，最后一个点位置为x:200px,y:200px，最后自动闭合成一个长宽高都为100px的正方形。

乾三_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css 属性clip-path之多边形polygon小窥

实例：废话不多说，上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>clip-path实践</title> <link rel="stylesheet" type="text/css" href="css/style.css"></head><body> <di
复制链接

扫一扫