How to use css to modify the picture to achieve this effect?

I want to make the four corners of the picture transparent, because the background of the picture is white, but I only want to use the red part.

or can I use html+css instead of pictures?

Css
Mar.01,2021

you can use radial-gradient to fillet:

<div id="container"></div>
-sharpcontainer{
        width: 300px;
        height: 100px;
        background: radial-gradient(50px 50px at top left ,transparent 50%, -sharpf00 50%) top left,
                    radial-gradient(50px 50px at bottom left ,transparent 50%, -sharpf00 50%) bottom left,
                    radial-gradient(50px 50px at top right ,transparent 50%, -sharpf00 50%) top right,
                    radial-gradient(50px 50px at bottom right ,transparent 50%, -sharpf00 50%) bottom right;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }

clipboard.png


clipboard.png


just ps the button directly


on each corner of the picture, the background under the two div, is set to white, and the upper one is set to translucent


can also be directly achieved with css if it is not troublesome. The specific method is to stack the four corners of a square box with a circle and realize the concave fillet by positioning.


it's a little complicated to use css. Might as well directly make the picture like this


the best way, let ui change the picture, the front end to do this is meaningless.


the one upstairs writes well with a circular gradient, but he still can't achieve it because he has shadows.

you can only export the original image directly to SVG using the SVG, suggestion.

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-1bf787a-5371f.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-1bf787a-5371f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?