A Rhombus shape with rounded corners for your image
Transform your image into a Rhombus shape with rounded corners using a few lines of code
- No extra element (only the
<img>tag) - No overflow issue
- Only 3 properties
- Optimized with CSS variables
img {
--r: 50px; /* the radius */
aspect-ratio: 1;
clip-path:
polygon(
50% calc(-.414*var(--r)), calc(100% + .414*var(--r)) 50%,
50% calc(100% + .414*var(--r)), calc(-.414*var(--r)) 50%
);
--_l: #0000 calc(25% + .707*var(--r)),
#000 0 calc(75% - .707*var(--r)), #0000 0;
--_g:/calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
mask:
linear-gradient(45deg,var(--_l)),linear-gradient(-45deg,var(--_l)),
top var(--_g) no-repeat space,left var(--_g) space no-repeat;
}See the Pen Rhombus image with rounded corner by Temani Afif (@t_afif) on CodePen.