CSS блоки нестандартной формы

100

28 февраля 2021, 15:10

Верстаю уже давно, но такой блок первый раз вижу. Гуглил, не нашел там ничего особо. Как можно такое сверстать ?

Answer 1

Да собственно наука не сложная

Открываем векторный редактор и обводим декоративные фигуры и группируем их это будет типа основы для нашего паттерна

Дальше ищем нужное изображение, я взял размер из головы 300х300 и получаем итоговый вариант

А дальше обычный html: https://codepen.io/topicstarter/pen/KjqMPg

Если что то не ясно спрашивайте

<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>

И собственно всё