Html Question posted in
Some basic documentation can be found here.

Html – Css mask-image corner pixelated

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.

enter image description here

.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
    );
}
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search