css3锯齿

时间:2019-11-27
本文章向大家介绍css3锯齿，主要包括css3锯齿使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

左右锯齿

先写一个div例如<div class="sawtooth">你好。这是一个 div 元素。</div>

接着用纯css3写锯齿

.sawtooth {
    /* 相对定位，方便让before和after伪元素绝对定位偏移 */
    position: relative;
    /* 把超出p的部分隐藏起来 */
    overflow: hidden;
}
 
.sawtooth:before, .sawtooth:after {
    content: ' ';
    width: 0;
    height: 100%;
    /* 绝对定位进行偏移 */
    position: absolute;
    top: 10px;
}
 
.sawtooth:before {
    /* 圆点型的border */
    border-right: 10px dotted white;
    /* 偏移一个半径，让圆点的一半覆盖p */
    left: -5px;
}
 
.sawtooth:after {
    /* 圆点型的border */
    border-left: 10px dotted white;
    /* 偏移一个半径，让圆点的一半覆盖p */
    right: -5px;
}
 
上线锯齿
<div></div>

div{
            width: 400px;
            height: 400px;
            background-color: red;
            padding: 20px 0;
            overflow: hidden;
            position: relative;
        }
        div:after,div:before{
            content: '';
            display: block;
            width: 100%;
            position: absolute;
            border-top: 10px dotted yellow;
            transform:translateY(-50%);
        }
        div:after{
            top:0;
            transform:translateY(-50%);
        }
        div:before{
            bottom: 0;
            transform:translateY(50%);
        }

原文地址：https://www.cnblogs.com/hlhs/p/11944588.html

随机文章
WEB前端知识点必读
最近更新