CSS -угол ⇐ Html

[Anonymous]

Мне нужно создать эту кнопку специальной формы.

Так инициатором, что инициируется, и инициатором будет трансформировать, и фона станут. Оранжевый. Мне нужны углы только в правой верхней и нижней левой части Два остановки должны быть прямыми. Наряду с эффектом оранжевого падения, как упоминалось ранее. Вот код, который у меня есть на данный момент < /p>

Код: Выделить всё

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: poppins, sans-serif;
padding: 20px;
background-color: #5240f3;
}

.box {
--b: 4px; /* border */
--s: 20px; /* size of the cut */

width: 300px;
display: inline-block;
aspect-ratio: 1.5;
position: relative;
z-index: 0;
}
.box:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(45deg, white, white);
--g1: #000 var(--b), #0000 0 calc(100% - var(--b)), #000 0;
--g2: #0000 calc(0.707 * var(--s)), #000 0 calc(0.707 * var(--s) + var(--b)),
#0000 0 calc(100% - 0.707 * var(--s) - var(--b)),
#000 0 calc(100% - 0.707 * var(--s)), #0000 0;
-webkit-mask: linear-gradient(45deg, var(--g2)),
linear-gradient(-45deg, var(--g2)),
linear-gradient(90deg, var(--g1)) 50%/100% calc(100% - 2 * var(--s))
no-repeat,
linear-gradient(180deg, var(--g1)) 50% / calc(100% - 2 * var(--s)) 100%
no-repeat;
}< /code>









CSS Masking

Подробнее здесь: https://stackoverflow.com/questions/797 ... ine-button