Возможно ли такой задний фон сделать только CSS стилями? [закрыт]
Скорее всего, данный вопрос не соответствует тематике Stack Overflow на русском, согласно правилам описанным в справке.
Закрыт 7 месяцев назад .
На этой картинке будет какой-то контент и при адаптиве он по высоте расширяется. И вопрос в следующем, как можно данную форму заднего фона сделать только на css?
Отслеживать
задан 13 апр в 12:45
29 3 3 бронзовых знака
clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 0, 50% 20%, 100% 0); background: white;
13 апр в 12:55
отдельные вопросы надо задавать (как бы это странно ни звучало) отдельными вопросами.
13 апр в 12:55
данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему)
13 апр в 12:55
Не согласен, если нужно реализовать только CSS способом. То кому-то да поможет.
13 апр в 14:17
@Andew согласен, вопрос должен звучать по другому, так как пока внутрь задачи не зайдёшь, не поймёшь, что требуется, а в поиске люди не будут искать по названию — «Возможно ли такой задний фон сделать только CSS стилями?»
14 апр в 4:27
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Если это именно задний фон, то вариантов дохрена.
- clip-path , как вам показали в комментариях, у элемента, спозиционированного позади. Или у псевдоэлемента.
- transform:skew(0deg, 5deg) у псеводэлемента :before и transform:skew(0deg, -5deg) — у :after. Ну и плюс прочие свойства.
- фон из двух косых градиентов:
Можно еще повыделываться.
Отслеживать
ответ дан 13 апр в 22:08
Инквизитор Инквизитор
5,935 1 1 золотой знак 6 6 серебряных знаков 25 25 бронзовых знаков
примерный эскиз блоков можно вот так дальше на усмторение
.block1 < display: inline-block; margin-top: 70px; margin-left: 90px; background-color: gray; height: 150px; width: 300px; transform: rotate(25deg); >.block2
Отслеживать
ответ дан 13 апр в 14:56
Eziz Gapbarov Eziz Gapbarov
94 6 6 бронзовых знаков
ну и добавить в целм все это в backgorund(«»)
13 апр в 14:57
вы всё правильно мыслите, но не правильно реализовали. Нужно было оставить только один блок и ему задать position: relative; overflow: hidden;, потом создать ему псевдоклассы и им уже задавать такие фигуры.
14 апр в 4:30
По задаче тут больше skewY подойдёт, чем rotate() .
14 апр в 6:40
- html
- css
-
Важное на Мете
Похожие
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.