Возможно ли так сделать?

Question

[Антон]

Возможно ли сделать такие границы у блоков без использования фоновых картинок?

Answer 1

[Олег]

Возможно на чистом css

Comments

[Антон]

Можете по подробнее описать?

Answer 2

[archelon]

верхний с помощью border-radius и box-shadow
нижний - transform: skewY(-5deg);

Comments

[Антон]

При помощи border-radius будут скругляться углы, тоесть будет не так как на первой картинке, либо я что-то не так понял. По поводу skewY - по моему текст который будет находится внутри блока будет так же искажен!?

[archelon]

с бордер-радиус нужно экспериментировать. есть решения с множественным значением, которые позволяют так делать. сейчас, увы, некогда искать.

skewY - текст внутри поместите в дополнительный контейнер, которому задайте skewY с обратным значением.

<div class="block">
  <div class="inner">
    text
   </div>
</div>

.block {
    transform: skewY(-5deg);
}
.inner {
    transform: skewY(5deg);
}

[archelon]

www.css3.info/preview/rounded-border

[Антон]

archelon, спасибо, буду пробовать

Answer 3

[Ankhena]

Да, можно

1. border-radius и box-shadow
2. фоновый градиент с четкими границами и под нужным вам углом

Comments

[Антон]

С первым я уже разобрался, можете по подробнее свой 2й вариант расписать, а то я не совсем понял что вы имеете ввиду!?

[Ankhena]

Антон, спросите конкретнее, что именно не понятно
https://html5book.ru/css3-gradient/
css.yoksel.ru/css-patterns

[Ankhena]

Антон, это еще Как сделать такие градиенты?