I’ve tried to create a curved box using mask-image property. I’ve achieved what
i need but the issue is that the corner looks pixelated. Any solutions for this.
.shape {
width: 50px;
height: 50px;
background: #f00;
mask-image: radial-gradient( circle 100px at 0 0, transparent 0, transparent 50px, black 21px);
}<div class="shape">
</div>Demo fiddle
Here is the code
.shape{
width: 50px;
height: 50px;
background: #f00;
mask-image: radial-gradient(
circle 100px at 0 0,
transparent 0,
transparent 50px,
black 21px
);
}
1
You can “smooth” the gradient:
.shape {
width: 50px;
height: 50px;
background: #f00;
mask-image: radial-gradient( circle 100px at 0 0, transparent 0, transparent 50px, black 51px, black 21px);
}<div class="shape">
</div>
The solution is to use SVG as svgs don’t rely on pixels like mask-image does, it relies on math/geometry. see vector graphics to understand.
.shape{
width: 500px;
height: 500px;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 74.877 74.877"><path d="M74.612 0c.65 24.955.082 49.918.265 74.877H0C38.566 72.93 73.975 39.213 74.612 0z" fill="%23ea3323"/></svg>');
}<div class="shape"></div>note that even with 500px width/height it does not pixelate
The thing is that you will have to create the svgs or use from the web
- create the svg
- convert to svg to data uri