CSS: Image as rhombus with roundet corner

Question

I have already found out with the help of the search function here how I can display an image as a rhombus

img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}

However, I have not yet managed that the four corners are rounded.

I would also like to display the images staggered below each other. But my attempt only works if there are the same number of images in the last line. Can I solve this better?

img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}
.container {
  text-align: center;
}
.line {
  margin-top: -75px;
}

<div class="container">
  <div class="normal-line">
    <img src="https://images.....">
    <img src="https://images.....">
    <img src="https://images.....">
    <img src="https://images.....">
    <img src="https://images.....">
  </div>
  <div class="line">
    <img src="https://images.....">
    <img src="https://images.....">
    <img src="https://images.....">
    <img src="https://images.....">
  </div>
</div>

Does this answer your question? [How to round out corners when using CSS clip-path](https://stackoverflow.com/questions/31765345/how-to-round-out-corners-when-using-css-clip-path) — DBS, May 12 '23 at 12:39
read this for the staggered part: https://css-tricks.com/hexagons-and-beyond-flexible-responsive-grid-patterns-sans-media-queries/ — Temani Afif, May 12 '23 at 12:59
@ago thank you too. But at the moment this don't work. I must try again later. Any other idea? — , May 12 '23 at 13:40

score 0 · Answer 1 · answered May 12 '23 at 20:28

Here is a bit crazy idea where I using the code from my article to create the grid of images and then clip-path combined with mask to create the shape

All you need is to update the CSS variables to control the layout. I will try to add more details later

.main {
  --r: 20px;   /* radius of images */
  --s: 150px;  /* size  of image */
  --m: 10px;   /* gap */
  
  --f: calc(var(--s) + 4*var(--m) - 2px);
  display:flex;
}

.container {
  font-size: 0; /*disable white space between inline block element */
}

.container img {
  width: var(--s);
  margin: var(--m);
  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%);
  margin-bottom: calc(var(--m) - var(--s)*0.5);
  --_p: calc(25% + var(--r)/1.414);
  --_g: #0000 var(--_p),#000 0 calc(100% - var(--_p)), #0000 0;
  -webkit-mask:
    linear-gradient( 45deg,var(--_g)),
    linear-gradient(-45deg,var(--_g)),
    radial-gradient(var(--r) at 50% var(--r),#000 98%,#0000 101%)
     top/100% calc(100% - 2*var(--r)),
    radial-gradient(var(--r) at var(--r) 50%,#000 98%,#0000 100%)
     left/calc(100% - 2*var(--r)) 100%;
}
.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 140%;
  shape-outside: repeating-linear-gradient(     
                   #0000 0 calc(var(--f) - 3px),      
                   #000  0 var(--f));
}

body {
  background: #999;
}

<div class="main">
  <div class="container">
   <img src="https://picsum.photos/id/75/200/200" alt="grap">
   <img src="https://picsum.photos/id/102/200/200" alt="raspberry">
   <img src="https://picsum.photos/id/248/200/200" alt="cactus">
   <img src="https://picsum.photos/id/1080/200/200" alt="strawberry">
   <img src="https://picsum.photos/id/75/200/200" alt="grap">
   <img src="https://picsum.photos/id/102/200/200" alt="raspberry">
   <img src="https://picsum.photos/id/248/200/200" alt="cactus">
   <img src="https://picsum.photos/id/1080/200/200" alt="strawberry">
   <img src="https://picsum.photos/id/75/200/200" alt="grap">
   <img src="https://picsum.photos/id/102/200/200" alt="raspberry">
   <img src="https://picsum.photos/id/248/200/200" alt="cactus">
   <img src="https://picsum.photos/id/1080/200/200" alt="strawberry">
   <img src="https://picsum.photos/id/75/200/200" alt="grap">
   <img src="https://picsum.photos/id/102/200/200" alt="raspberry">
   <img src="https://picsum.photos/id/248/200/200" alt="cactus">
   <img src="https://picsum.photos/id/1080/200/200" alt="strawberry">
   <img src="https://picsum.photos/id/75/200/200" alt="grap">
   <img src="https://picsum.photos/id/102/200/200" alt="raspberry">
   <img src="https://picsum.photos/id/248/200/200" alt="cactus">
   <img src="https://picsum.photos/id/1080/200/200" alt="strawberry">
  </div>
</div>

Thank you @Temani Afif. I will check this. I have another problem with your code and hope you might have another idea? The page is drawn into the length. If I insert here https://codepen.io/t_afif/pen/MWbpjvw 20 times more, I have at the end still a long white page without content. — , May 15 '23 at 07:53

CSS: Image as rhombus with roundet corner

1 Answers1