Is there anyone who can help me with this? I’d like to create the following in Webflow. Can someone explain how I can get the borders of the blocks to look like they do in the screenshot below?
Please note: This is a collection list with collection items inside.
The most simple way I can think of would be to take a div as a wrapper inside the item. Then add overall padding inside the div, set the shapes as BG image. Maybe you could pulls the BG image from the CMS of each item. Hope this helps! Good Luck!
CSS clippaths or SVG backgrounds are the approaches I use. SVG is a better choice for organic shapes.
.card {
width: 300px;
padding: 2rem;
color: #333;
font-family: 'Georgia', serif;
background: url('wavy-card.svg') no-repeat center/cover;
}
Thanks guys! The clippath option works great! I used the Clip Path Bae app/plugin.
There is just one more thing;
Our designer set the height of the reviews based on the length of the text, but the way I’ve built it now, all blocks have the same height. Do you have any idea how I can get the layout of the blocks to match the design?
