Сверстать геометрическую фигуру с градиентом

@novichek_1905 · Регистрация: 16.02.2018

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

все привет! вопрос, как сверстать такой элемент (см вложение)? Градиент может быть любым как и скругление

Qwerty_Wasd · 22.11.2018, 12:56

novichek_1905, как вариант - https://codepen.io/qwerty_wasd/pen/vQdwoo

HTML5
1
<div class="test"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
.test {
  margin: 100px auto;
  height: 150px;
  width: 100px;
  border-radius: 30px;
  -webkit-clip-path: polygon(0 0, 0 81%, 77% 0);
  clip-path: polygon(0 0, 0 81%, 77% 0);
  background: #feccb1;
  /* Old browsers */
  background: linear-gradient(135deg, #feccb1 0%, #f17432 19%, #ea5507 69%, #fb955e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=1 );
}

@novichek_1905 · 22.11.2018, 13:17 **[ТС]**

Qwerty_Wasd, , благодарю! Но не понятно как задать нужный размер, скажем 42 на 52 px

Qwerty_Wasd · 22.11.2018, 13:22

novichek_1905,

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.test {
  margin: 100px auto;
  height: 52px;
  width: 42px;
  border-radius: 30px;
  -webkit-clip-path: polygon(0 0, 0 81%, 77% 0);
  clip-path: polygon(0 0, 0 81%, 77% 0);
  background: #feccb1;
  /* Old browsers */
  background: linear-gradient(135deg, #feccb1 0%, #f17432 19%, #ea5507 69%, #fb955e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=1 );
}

@scivola · 22.11.2018, 13:40

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Фигура с градиентом</title> 
        <style>
            div {
            /*Задаем ширину и высоту блока*/
                width: 100px;
                height: 100px;
            /*Задаем радиус скругления верхнего левого угла*/
                border-radius: 40px 0 0 0;
            /*Задаем градиент по диагонали от нижнего правого до верхнего левого угла*/
                background: linear-gradient(to left top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%);
            }
        </style>
    </head>
    
    <body>  
        <div>
        </div>
    </body>
</html>

Добавлено через 3 минуты
https://codepen.io/ScorpionKrovavich/pen/OaQKbv

Добавлено через 7 минут

HTML5
1
<div></div>

CSS
1
2
3
4
5
6
7
/*Задаем ширину и высоту блока*/
width: 100px;
height: 100px;
/*Задаем радиус скругления верхнего левого угла*/
border-radius: 40px 0 0 0;
/*Задаем градиент по диагонали от нижнего правого до верхнего левого угла*/
background: linear-gradient(to left top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%);

@novichek_1905 · 22.11.2018, 14:10 **[ТС]**

Qwerty_Wasd, размеры задать оказалось не достаточно... выглядит некоторолируемо.

scivola, благодарю, но присутствуют артефакты в виде зазубринок (скрин)

Возможно есть ещё варианты реализации этой задумки?

Qwerty_Wasd · 22.11.2018, 14:14

novichek_1905,

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

Qwerty_Wasd, размеры задать оказалось не достаточно... выглядит некоторолируемо.

забыл уменьшить размер радиуса бордера. Посмотрите в песочнице.

@scivola · 22.11.2018, 14:49

Вставил цвета, как у Вас и посмотрел в нескольких браузерах. Наоборот - граница размыта.

CSS
1
background: linear-gradient(to left top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(252,162,106,1) 51%,rgba(190,33,70,1) 100%);

@novichek_1905 · 22.11.2018, 15:18 **[ТС]**

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

Вставил цвета, как у Вас и посмотрел в нескольких браузерах. Наоборот - граница размыта.

да, я там переход поставил от 50.1% из-за этого... Благодарю!

@scivola · 22.11.2018, 15:22

Не за что!

@novichek_1905 · 22.11.2018, 18:00 **[ТС]**

Стало любопытно, а есть ещё способы реализации такого уголка? И какой был бы наиболее кроссбраузерный и универсальный?

Qwerty_Wasd · 22.11.2018, 19:52

novichek_1905,

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

И какой был бы наиболее кроссбраузерный и универсальный?

SVG

К примеру - https://codepen.io/qwerty_wasd/pen/aQYBKq

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<svg id="svg8" width="42" height="52" viewBox="0 0 11.1125 13.758334">
  <defs id="defs2">
    <lineargradient id="linearGradient6584">
      <stop id="stop6580" style="stop-color:#782121;stop-opacity:1;" offset="0"></stop>
      <stop id="stop6582" style="stop-color:#ff9955;stop-opacity:0;" offset="1"></stop>
    </lineargradient>
    <lineargradient id="linearGradient6539" osb:paint="gradient">
      <stop id="stop6535" style="stop-color:#ff7c25;stop-opacity:1;" offset="0"></stop>
      <stop id="stop6537" style="stop-color:#ff9955;stop-opacity:0;" offset="1"></stop>
    </lineargradient>
    <lineargradient id="linearGradient6529" osb:paint="solid">
      <stop id="stop6527" style="stop-color:#ff9955;stop-opacity:1;" offset="0"></stop>
    </lineargradient>
    <lineargradient id="linearGradient6586" xlink:href="#linearGradient6584" x1="-39.08794" y1="149.15683" x2="237.28242" y2="192.44618" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.05332659,0,0,0.04665651,-0.01067062,283.2198)"></lineargradient>
  </defs>
  <g id="layer1" transform="translate(0,-283.24165)">
    <path id="rect5036" style="fill:url(#linearGradient6586);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.09976037;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;" d="M 0.0214959,283.28633 11.110923,283.26849 0.00948552,297.05505 -0.02594975,286.54526 C 0.00807579,283.2609 3.6064406,283.25085 3.458717,283.25085 Z"></path>
  </g>
</svg>

@novichek_1905 · 23.11.2018, 10:37 **[ТС]**

Qwerty_Wasd, благодарю! Но выглядит сложно)

Qwerty_Wasd · 23.11.2018, 11:11

novichek_1905, Да не особо если разобраться.
Ну например, скачайте себе INKSCAPE. Он абсолютно бесплатен.
Почитайте как пользоваться редактором. И сможете даже анимированные SVG карты в ней делать. Да и не только.

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Ниже машинный перевод статьи The Thinkpad X220 Tablet is the best budget school laptop period . Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы,. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930

	Сверстать геометрическую фигуру с градиентом 22.11.2018, 12:19. Показов 2689. Ответов 13 Метки нет (Все метки) все привет! вопрос, как сверстать такой элемент (см вложение)? Градиент может быть любым как и скругление Изображения 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	22.11.2018, 13:17 [ТС]
	Qwerty_Wasd, , благодарю! Но не понятно как задать нужный размер, скажем 42 на 52 px 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	22.11.2018, 14:10 [ТС]
	Qwerty_Wasd, размеры задать оказалось не достаточно... выглядит некоторолируемо. scivola, благодарю, но присутствуют артефакты в виде зазубринок (скрин) Возможно есть ещё варианты реализации этой задумки? Изображения 0

@scivola 81 / 49 / 34 Регистрация: 22.05.2018 Сообщений: 192
	22.11.2018, 15:22
	Не за что! 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	22.11.2018, 18:00 [ТС]
	Стало любопытно, а есть ещё способы реализации такого уголка? И какой был бы наиболее кроссбраузерный и универсальный? 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	23.11.2018, 10:37 [ТС]
	Qwerty_Wasd, благодарю! Но выглядит сложно) 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	23.11.2018, 11:11
	novichek_1905, Да не особо если разобраться. Ну например, скачайте себе INKSCAPE. Он абсолютно бесплатен. Почитайте как пользоваться редактором. И сможете даже анимированные SVG карты в ней делать. Да и не только. 1

Сверстать геометрическую фигуру с градиентом

Решение