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

.

Previous: Build mongdob index in python code

Next: The upgrade of node-mongodb version caused mongodb.open to report an error, which returned a 500th error.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu