Как правильно подойти к вопросу: создание элемента с необычной формой и прозрачным фоном и рамкой?

CSS HTML PHP

1 ответ

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

<div class="module_profile" id="moduleProfile"> <div class="mp_header">div> </div>

.module_profile { position: relative; top: 0%; left: 50%; transform: translate(-50%, 20%); padding: 8px 8px 10px 8px; height: 600px; width: 600px; background: linear-gradient(135deg, var(--color-purple-0) 0%, var(--color-blue-1) 50%, var(--color-blue-0) 100%); border: 3px solid var(--color-purple-4); border-radius: 25px; z-index: 1000; } .mp_header { position: relative; top: 0%; left: 50%; transform: translate(-50%, 0%); margin-bottom: 5px; height: 150px; width: 580px; padding: 5px 3px; background: color-mix(in srgb, var(--color-text-0) 3.5%, transparent); clip-path: path("M 0,15 A 15,15 0,0,1 15,0 L 565,0 A 15,15 0,0,1 580,15 L 580,75 A 15,15 0,0,1 565,90 L 165,90 A 15,15 0,0,0 150,105 L 150,135 A 15,15 0,0,1 135,150 L 15,150 A 15,15 0,0,1 0,135 Z"); overflow: hidden; }

Должно быть так
По вводным: как такое вообще реализовать только если в Figma. (Но раз там такое можно получить то и с помощью кода наверно тоже)

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Анна SEO Ответ

Для элемента необычной формы с прозрачным фоном и рамкой есть несколько нормальных подходов. Выбор зависит от формы. Если форма простая многоугольная — используйте clip-path. Если нужна сложная плавная форма — лучше SVG. Идея “такой же элемент сзади, но больше” рабочая, но в CSS её нужно делать аккуратно через псевдоэлемент.

Для polygon-формы можно сделать так:

.shape {
  position: relative;
  padding: 24px;
  background: transparent;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
 
.shape::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #2f6bff;
  clip-path: inherit;
  z-index: -2;
}
 
.shape::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: white;
  clip-path: inherit;
  z-index: -1;
}

.shape { position: relative; padding: 24px; background: transparent; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); } .shape::before { content: ""; position: absolute; inset: 0; background: #2f6bff; clip-path: inherit; z-index: -2; } .shape::after { content: ""; position: absolute; inset: 2px; background: white; clip-path: inherit; z-index: -1; }

Здесь ::before даёт рамку, а ::after перекрывает центр. Но если фон должен быть полностью прозрачный и показывать картинку/градиент под элементом, такой способ не всегда подойдёт, потому что внутренняя заливка будет не прозрачной.

Для настоящей прозрачной середины лучше SVG:

&lt;svg viewBox="0 0 300 120"&gt;
  &lt;path d="M20 5 H295 L275 115 H5 Z"
        fill="none"
        stroke="#2f6bff"
        stroke-width="3"/&gt;
&lt;/svg&gt;

SVG даёт настоящую рамку без заливки и лучше контролирует сложные формы. Внутрь можно положить HTML рядом/поверх SVG через absolute-позиционирование.

Итог: для простых форм используйте clip-path + псевдоэлементы. Для прозрачного фона и точной рамки сложной формы лучше SVG path с fill="none" и stroke. Это стабильнее, чем пытаться имитировать border на произвольной CSS-форме.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ

Как правильно подойти к вопросу: создание элемента с необычной формой и прозрачным фоном и рамкой?

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно