Создание блока произвольной формы

Question

Помогите пожалуйста, как создать вот такой блок? Пробовал через clip-path, но из за скругления углов получается не то, что нужно.

Answer 1

Можно реализовать такую форму благодаря псевдоэлементам ::before и ::after. Чтобы добиться нужного вам скругления, можно поэкспериментировать с размерами и углами поворота (rotate()) этих элементов.

div {
  width: 400px;
  height: 300px;
  padding: 10px;
  border: 2px solid green;
  border-radius: 5px;
  position: relative;
}

p {
  margin: 0;
  font-family: monospace;
}

div::after {
    position: absolute;
    content: "";
    width: 150px;
    height: 150px;
    background: transparent;
    bottom: 27px;
    right: 26px;
    transform: rotate(45deg);
    border-right: 2px solid green;
    border-radius: 7px;
}

div::before {
    position: absolute;
    content: "";
    width: 150px;
    height: 150px;
    background: white;
    bottom: -77px;
    right: -80px;
    transform: rotate(45deg);
}

<div>
<p>Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое.</p>
<p>Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое.</p>
<p>Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое.</p>
<p>Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое. Контент и содержимое Контент и содержимое.</p>
<p>Контент и содержимое. Контент и содержимое.</p>
<p>Контент и содержимое. Контент и содержимое.</p>
</div>

Answer 2

При творческом подходе, можно придать блоку любую форму, если блок имеет фиксированные размеры, однородный цвет фона, и у него отсутствует полупрозрачность. Когда же макет требует обратного, то задача сильно усложняется. И тут желательно правильно выбрать технологию реализации: чистый CSS, SVG, canvas или даже растровые изображения.

В данном вопросе, лучше было бы использовать SVG, но в метках вопроса таковое отсутствует, посему - CSS. Из-за стремления сократить количество кода, есть недочёты (подробнее в самом примере):

body {
  min-height: 100vh; margin: 0;
  display: grid; place-items: center;
  background-image: radial-gradient(circle farthest-corner at right 19% bottom 35%, #01d03c 10%, #061a3b 43%);
}

.glow {
  position: relative;
  margin: 0 1em;
  min-height: 7.5em; height: max-content;
  min-width: 12em;
  padding: 2.16666667em 5.83333333em 2.16666667em 2.33333333em;
  border: 0.16666667em solid #31e900;
  border-radius: 0.83333333em 1.08333333em 0.83333333em 1.08333333em;
  border-right: 0.16666667em solid #0000;
  border-bottom: 0.16666667em solid #0000;
  box-sizing: border-box;
  font: 12px/1.4em sans-serif; letter-spacing: 0.04166667em;
  column-count: 2; column-gap: 2.83333333em;
  background: left 2.66666667em top 3em / calc(100% - 6.75em) calc(100% - 5.33333333em) linear-gradient(0deg, #0026, #0026), left 2.66666667em top 0em / calc(100% - 0.26458333em) 3em linear-gradient(-39deg, #0000 4em, #0026 4.08333333em), left 0em top 0em / 2.66666667em calc(100% + 2.83333333em) linear-gradient(-39deg, #0000 4em, #0026 4.08333333em);
  background-repeat: no-repeat;
  color: #fff; outline: none;
  filter: drop-shadow(0 0 0.16666667em #0885);
}

.glow::before,
.glow::after {
  content: "";
  position: absolute; z-index: -1;
  border: 0.16666667em solid #31e900;
  box-sizing: border-box;
  background-color: #0026;
}
.glow::before {
  bottom: 0em; left: 1.16666667em;
  width: calc(100% - 6.25em); height: 2.33333333em;
  border-radius: 0 0 0.83333333em 0.83333333em / 0 0 0.83333333em 0.5em;
  border-left-color: #0000; border-top-color: #0000;
  border-right-width: 0.25em; border-left-width: 0.08333333em;
  transform: skewx(-51deg);
}
.glow::after {
  top: 1.33333333em; right: -0.08333333em;
  width: 4.16666667em; height: calc(100% - 5em);
  border-radius: 0 0.75em 0.83333333em 0 / 0 1.08333333em 0.83333333em 0;
  border-left-color: #0000; border-top-color: #0000;
  border-bottom-width: 0.25em; border-top-width: 0.08333333em;
  transform: skewy(-39deg);
}

<div class="glow" contenteditable>? <i>Текст в этом блоке можно редактировать, для проверки адаптивности.</i>
  <h2>Создание блока произвольной формы</h2>Внимание! В левом нижнем и правом верхнем углах, а также на линии скоса, могут присутствовать артефакты. Ещё было замечено, что при масштабировании страницы и/или при малом количестве контента, иногда разъезжается полупрозрачный фон блока. К сожалению, без усложнения разметки и стилей, "pixel perfect" недостижим, а сделать хотелось максимально просто.</div>

Реализация следующая:

Псевдоэлементы:
- Устанавливаем позицию и размеры;
- Трансформацией задаём наклон;
- Скрываем ненужные части рамки, с помощью прозрачности.
Основной блок:
- Заполняем фон полупрозрачными градиентами;
- Скрываем ненужные части рамки, с помощью прозрачности.

БЛОГ НА HUSL

Создание блока произвольной формы

Ответы (2 шт):