On the realization of aliasing effect by CSS

this kind of picture is the sawtooth of the background, and the inner concave circle is a transparent sawtooth shape, and the picture cannot be aliased. It"s driving me crazy.

Css
Aug.18,2021

you can use canvas to implement

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas </title>
        <style type="text/css">
            body {
                background: -sharpD3D3D3;
            }
            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>

css3 mask attribute.
main code

    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;

effect (available in chrome and firefox tests): https://codepen.io/liuyaqi/pe.


<!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>

try this in general


there are many ways to implement CSS-shape, and I recommend one using CSS. Use box-shdow and box-radius to make semicircular hollowed-out graphics, and use pseudo element:: before,::after to do the upper and lower hollowed-out figures, respectively. The code reference demo


the relatively simple method is data uri picture do background


find a black circular background image, only tile horizontally, and move the background image position

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eaea07-5d00a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eaea07-5d00a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?