用CSS来实现优惠券上的锯齿效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>


<style>
    .dotted {
        position: relative;
        background: -o-linear-gradient(left, #5d95e0, #697dde);
        background: -o-linear-gradient(right, #5d95e0, #697dde);
        background: -moz-linear-gradient(right, #5d95e0, #697dde);
        background: linear-gradient(to right, #5d95e0, #697dde);
        width: 300px;
        height: 200px;
    }



    .dotted:before {
        content: ' ';
        width: 0;
        height: 100%;
        position: absolute;

        /* 小球形状 */
        border-right: 6px dotted white;
        left: -3px;
        top: 0px;
    }
</style>

<body>
    <div class="dotted"></div>
</body>

</html>

效果图

用CSS来实现优惠券上的锯齿效果插图

其实也还有一个笨的办法,就是写个小球,然后定位到合适的位置,依次写几个衔接,也可以实现相同效果,就是代码不怎么美观,但是效果比这个好.

原文链接：https://blog.csdn.net/weixin_42164539/article/details/88951510

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《用CSS来实现优惠券上的锯齿效果》