Подскажите как сверстать данный элемент

@AlexZaw · Регистрация: 07.08.2016

Студворк — интернет-сервис помощи студентам

Тут есть тени, градиент, закругленные углы, и выпуклая верхняя часть.
С тенями, градиентом, и нижней частью проблем нет, но вот как реализовать верхнюю часть - ума не приложу.
border-radius c параметрами через "/" не дает резкого закругления по краям, псевдоэлементами придется подгонять диагональный градиент, что при адаптации создаст кучу гемороя. Картинкой сделать нельзя так как содержимое может меняться. Есть какое-то менее болезненное решение чем через псевдоэлементы?

Qwerty_Wasd · 24.10.2017, 16:53

AlexZaw, как-то так. Песочница Хотя конечно подгонять придется под то что вам нужно.

CSS
1
2
3
4
5
6
div{height:200px;width:400px;
border-top-left-radius: 40em 4em;
border-top-right-radius:40em 4em;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
background: red;}

@AlexZaw · 24.10.2017, 18:26 **[ТС]**

Сообщение от Qwerty_Wasd

как-то так. Песочница Хотя конечно подгонять придется под то что вам нужно.

Этот вариант не подходит, уже пробовал. Если присмотреться то верхние углы имеют такой же радиус как и нижние, но потом верх фигуры дополнительно смещается по оси Y.
Решил пока что таким образом

HTML5
1
2
3
<div class="promo">
  <div class="back"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  .back{
    background: repeating-linear-gradient(-45deg, #8852cd, #8852cd 1px, transparent 1px, transparent 3px);
    background-color: #854ecc;
    border-radius: 50% 50% 8px 8px / 8px 8px;
    width: 99%;
    height: 20px;
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
  }
  
 .promo { position: relative;
width: 500px;
height: 100px;
  padding-top:25px;
  box-sizing: border-box;
  display: inline-block;
  background: repeating-linear-gradient(-45deg, #8852cd, #8852cd 1px, transparent 1px, transparent 3px);
  background-color: #854ecc;
  border-radius:8px;
  color: #fff;
  box-shadow: 1px 2px 79px rgba(0, 0, 0, .26);

буду думать дальше.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,094

	Подскажите как сверстать данный элемент 24.10.2017, 14:38. Показов 1244. Ответов 2 Метки нет (Все метки) Тут есть тени, градиент, закругленные углы, и выпуклая верхняя часть. С тенями, градиентом, и нижней частью проблем нет, но вот как реализовать верхнюю часть - ума не приложу. `border-radius` c параметрами через "/" не дает резкого закругления по краям, псевдоэлементами придется подгонять диагональный градиент, что при адаптации создаст кучу гемороя. Картинкой сделать нельзя так как содержимое может меняться. Есть какое-то менее болезненное решение чем через псевдоэлементы? Миниатюры 0

Подскажите как сверстать данный элемент

Решение