Ksenija
Стили скиньте
Псевдоэлементы
Сообщений 11 страница 20 из 20
Поделиться1113.03.24 19:21
Поделиться1213.03.24 19:22
nou
/chatgpt. пишет вот это:
<style> .parallelogram { position: relative; width: 200px; height: 100px; background-color: #f2f2f2; transform: skewX(-20deg); margin: 50px; } .parallelogram::before, .parallelogram::after { content: ''; position: absolute; top: 0; width: 50px; height: 100%; background: #f2f2f2; } .parallelogram::before { left: -50px; transform: skewX(20deg); } .parallelogram::after { right: -50px; transform: skewX(-20deg); } </style>
К сожалению, это не решает проблему(
Поделиться1313.03.24 19:24
nou
Не могу, так как дизайн моего проекта находится в стадии разработки. Да и вообще боюсь за дизайн
Поделиться1413.03.24 19:25
Ksenija
Мне ток кусок с трансформацией
Или тот что ниже про него
Поделиться1513.03.24 19:26
nou
нам нужно подогнать прямоугольную форму этих контейнеров .punbb .section .container,
.punbb .main .container под паралеллограмм, без искажений их содержимого.
Поделиться1613.03.24 19:27
nou
Да этот кусочек чуть выше с трансформацией
Поделиться1713.03.24 19:34
Ksenija
Это на менюшку вы нацелились?
Поделиться1813.03.24 19:37
nou
Туда входят все форумы
Поделиться1913.03.24 19:51
Ksenija
Это конечно ппц гадание на кофейной гуще по всем теориям вероятностей
Поделиться2013.03.24 20:20
Ksenija
Надеюсь верно смоделировала
Вашу ситуацию
Ваш начальный код цепляет не только форумы (поэтому допилите сами по аналогии)
Как бы первоначальное предположение было верным
.punbb .section .container, .punbb .main .container {border: 1px solid red; position: relative; width: 600px; height: 300px; background-color: #f2f2f2; transform: skewX(-20deg); margin: 50px; } .punbb .section .container::before, .punbb .main .container::before { left: -50px; transform: skewX(20deg); } .punbb .section .container::after, .punbb .main .container::after { right: -50px; transform: skewX(-20deg); } .punbb .section .container table, .punbb .main .container table { transform: skewX(+20deg); }
Первые абзацики —это ваша фигура из ваших селекторов
Последний абзац это разворот в обратную сторону
Те сделали трансформацию ищете вложенный элемент и этот вложенный элемент разворачиваете
В примере с форумом это был table
Всю структуру майббы я не помню наизусть, поэтому может быть лишние селекторы
Отредактировано nou (13.03.24 20:22)