Custom-shaped CSS blocks

Question

Custom-shaped CSS blocks

I've been making up for a long time, but this is the first time I've seen such a block. Googled, didn't find anything special there. How can this be done ?

4

html css вёрстка clip-path layout

Author: bogdaryan, 2019-06-24

Source

1 answers

score 3 · Answer 1

Yes, actually the science is not complicated

Open the vector editor and outline the decorative shapes and group them. This will be the basis for our pattern

Next, we look for the desired image, I took the size from the head 300x300 and get the final version

And then the usual html: https://codepen.io/topicstarter/pen/KjqMPg

If something is not clear, ask

<svg viewbox="0 0 900 900" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
    <clipPath id="cp">
    <path d="M10,490 190,490 150,450 50,450 50,350 10,300z"/>
    <path d="M60, 440 490,440 490,210 440,160 440,60 380,60 280,10 60,10" />
    </clipPath>
 </defs>
   <image x="5" y="5" 
          width="490" 
          height="490" 
          clip-path="url(#cp)" 
          preserveAspectRatio="none"  
          xlink:href="https://i.stack.imgur.com/ogqRQ.jpg"/>
   <path d="M300,10  490,10 490,200  450,160 450,50 380,50z" fill="red" />
</svg>

And actually everything