This is one I wanted to try out personally didn't have a good layout for it until another designers created one for their project.
Download the Code
This great article by Sara Soueidan
- Clipping in CSS and SVG - The clip - path Property and <clipPath> Element
Also this tool for converting absolute paths to relative paths so you can use objectBoundingBox to make your clip-path responsive
- Convert SVG absolute clip-path to relative
SVG Code
<svg width="0" height="0">
<clipPath id="clip"clipPathUnits="objectBoundingBox">
<path fill="#000000" d="M0.999,0.252 C0.89,0.252,0.801,0.198,0.801,0.131 L0.701,0.131 C0.701,0.129,0.701,0.127,0.701,0.125 C0.701,0.056,0.609,0,0.496,0 C0.383,0,0.292,0.056,0.292,0.125 C0.292,0.127,0.292,0.129,0.292,0.131 L0.197,0.131 C0.197,0.198,0.109,0.252,0,0.252 L0,1 L1,1 L1,0.252 C1,0.252,0.999,0.252,0.999,0.252" />
</clipPath>
</svg>
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
View Dining
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
View Weddings
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
View Attractions