Как делать блоки такого вида?

#javascript #html #css #css3 #svg

Каким образом лучше всего делать блоки такого вида? 

Чтобы при масштабировании форма была адаптивна и текст не выходил за границы блока.
    

Ответы

Ответ 1

Решение SVG

Решение адаптивно, работает во всех браузерах.
Текст и знак параграфа находятся внутри блока SVG, поэтому никогда не нарушится их
взаимное положение и текст не выйдет за пределы блока при любом изменении размеров
окна браузера. Рамки и текст будут изменяться пропорционально.   



* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
}

  





Второй вариант блока с тенью   


Для реализации тени под первый полигон добавляем второй полигон и
смещаем его на 2px вправо и вниз: 

  

Ответ 2

Решение на CSS: * { margin: 0; padding: 0; } .wrapper { position: relative; max-width: 250px; margin: 3rem; padding: 1rem; border: 1px solid gray; } .angle, .in, .in2, .in2::before { position: absolute; height: 30px; } .angle { overflow: hidden; width: 160px; top: -30px; left: -1px; } .in { top: 0; left: -10px; width: 150px; background-color: gray; transform: skew(25deg); } .in2 { top: 1px; left: 1px; width: 130px; background-color: white; } .in2::before { content: ""; position: absolute; right: -8.4px; width: 25px; background-color: white; transform: skew(25deg); } .text { max-width: 350px; word-spacing: 3px; }

Lorem

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro necessitatibus deleniti perspiciatis excepturi quia facere? Porro necessitatibus deleniti perspiciatis excepturi quia facere?

Решение на SVG: * { margin: 0; padding: 0; } h2 { margin: 1rem 0.3rem 0 0.3rem; } p { font-size: 13px; padding: 0 0.3rem; } .container { width:100%; height:100%; }

Ответ 3

CSS и clip-path: .block, .block:before { clip-path: polygon(0 0, 50% 0, 70% 20%, 100% 20%, 100% 100%, 0 100%); z-index: -1; } .block { width: 200px; height: 200px; background-color: black; position: relative; } .block:before { content: ''; width: 198px; height: 198px; background: white; display: block; position: absolute; top: 1px; left: 1px; } .inner { padding: 50px 10px 10px; }

Lorem text