关于CSS实现锯齿效果

gahoo

413

发布于
2018-10-12

更新于
2018-10-12

新手上路，请多包涵

图片描述

这种图片作背景的锯齿，而且内凹圆是透明的锯齿形状该如何实现呢，而且图片不能带锯齿.....要被逼疯了T_T！

css

阅读 9.9k

6 个回答

liuyaqi

✓ 已被采纳

css3 mask属性。
主要代码

    mask-image: radial-gradient(circle at top, transparent 20px, black 0) ,radial-gradient(circle at bottom, transparent 20px, black 0);
    mask-position: top,bottom;
    mask-size: 60px calc(100% - 70px);
    mask-repeat: repeat-x;
    mask-mode: match-source;

效果（在chrome和firefox测试可以）: https://codepen.io/liuyaqi/pe...

布列瑟农的星空

1.4k21127

发布于
2018-10-12

可以使用canvas实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas 图片锯齿</title>
        <style type="text/css">
            body {
                background: #D3D3D3;
            }
            canvas {
                border: 1px solid;
            }
        </style>
    </head>

    <body>
        <canvas id="MyCanvas">
            
        </canvas>
        <script type="text/javascript">
            var c = document.getElementById("MyCanvas"),
                cxt = c.getContext("2d"),
                image = new Image();
            var r = 5;//锯齿半径
            image.src = "http://placeimg.com/200/400/any/sepia";
            image.onload = function() {
                c.width = image.width;
                c.height = image.height;
                cxt.drawImage(this, 0, 0);
                cxt.globalCompositeOperation = 'xor';
                //上部
                for(var i=r*2;i<c.width-r;i+=r*4) {
                    drawSawtooth(i,0,r,1);
                }
                //下部
                for(var i=r*2;i<c.width-r;i+=r*4) {
                    drawSawtooth(i,c.height,r,0);
                }
            }
            function drawSawtooth(x,y,r,d) { //d:方向
                cxt.fillStyle='rgb(0,0,0)';
                cxt.beginPath();
                if(d==1) {
                    cxt.arc(x,y,r,Math.PI,0,true);
                }else {
                    cxt.arc(x,y,r,0,Math.PI,true);
                }
                cxt.closePath();
                cxt.fill();
            }
        </script>
    </body>

</html>

zzgzzg00

3.7k21420

发布于
2018-10-12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        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%);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

大体这样试试