@PantyDev

Как сделать подобный шейп средствами css?

Всем привет, вопрос в следующем, как сделать такой вот шейп средствами CSS:
63d3b4fb38fff110149315.png
Вопрос именно в впадине которая сверху слева.
Дело в том, что если делать закругления псевдоклассами и/или другими внутренними блоками, то при просмотре в адаптиве происходит вот такое:
63d3b55bac387099363192.png
Т.е. есть просветы, пиксели срезаются.
Ну и к тому же, если честно, хотелось бы такой шейп вырисовать именно реальный. Т.е. чтобы там где белый уступ - это прозрачность, а не белый заполнитель. Может можно это как-то организовать с масками?
Но с маской она тоже будет искревлятся если этот блок начнет сужаться, а мне этого не нужно.
  • Вопрос задан
  • 127 просмотров
Решения вопроса 2
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Псевдоэлементы и радиальные градиенты
https://codepen.io/AnnaSummer/pen/KKQgaaN
Ответ написан
golubevstudio
@golubevstudio
Digital master
3 варианта:

1. Играться с градиентами. Но это порнография и во всех браузерах будет показываться по-разному.

2.
Т.е. чтобы там где белый уступ - это прозрачность, а не белый заполнитель

Прозрачность невозможна. В верстке все блочное.

3. Обычное svg. Именно для такого он и придуман.

4. Если уж очень хочется версткой, то сделать синий прямоугольник обертку со скруглением по всем углам. Внутрь положить еще одну обертку (асболютом).Внутрь нее еще два - Слева белый, справа тоже белый. А потом в правый белый положить еще один синий, только с закругленией в левом верхнем углу.
Но это уже порнография как по мне. Ну и конечно это будет не шейп.

Вот идеальный пример того, как это обычно реализуют. Тут сделано через png. Но лучше через svg
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы