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.

Previous: How to use Mini Program wx.createWorker ()?

Next: How does Angular2: get elements under the control of * ngIf?

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