css属性clip-path裁剪和linear-gradient渐变

原创于 2021-01-18 13:12:54 发布 · 525 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文深入探讨了CSS中的`clip-path`属性，详细解释了如何使用它进行复杂形状的裁剪，并结合`linear-gradient`创建独特的渐变效果。通过实例分析，展示了这两个属性在网页设计中的创新应用，提升视觉体验。

在这里插入图片描述

  .circle {
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: linear-gradient(to left, red, blue);
clip-path: circle(50% at 50% 50%);
    }

    .ellipse {
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: linear-gradient(to left, red, blue);
        clip-path: ellipse(25% 50% at 50% 50%);
    }

    .inset {
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: linear-gradient(to left top, red, blue,pink);
        clip-path: inset(10px 20px 30px 10px round 50px 0 50px 0);
    }

    .triangle{
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: linear-gradient(90deg, red, blue);
        clip-path: polygon(0 100%,50% 0,100% 100%)
    }
    .square{
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: linear-gradient(90deg, red, blue);
        clip-path: polygon(0 0,0 100%,100% 100%,100% 0)
    }

    <div class="circle"></div>
    <div class="ellipse"></div>
    <div class="inset"></div>
    <div class="triangle"></div>
    <div class="square"></div>