A Rhombus shape with rounded corners for your images
Transform your image into a Rhombus shape with rounded corners using a few lines of code
- No extra element (only the
<img>tag) - No pseudo-element
- Only 3 properties
- Optimized with CSS variables
img {
--r: 50px; /* the radius */
width: 250px; /* the image size */
aspect-ratio: 1;
object-fit: cover;
margin: calc(tan(22.5deg)*var(--r));
clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%) margin-box;
--_g:/calc(2*var(--r)) calc(2*var(--r))
radial-gradient(#000 70%,#0000 72%);
--_s:calc(100% - (1 - tan(22.5deg))*var(--r));
mask:
conic-gradient(#000 0 0) no-repeat 50%/var(--_s) var(--_s),
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.