задний план
В группе будут студенты, задающие связанные вопросы, как использовать CSS для реализации кнопки со срезанным углом и как реализовать кнопку со стрелкой?
Эта статья основана на некоторых кнопках, которые часто появляются в проектах дизайна, с использованием CSS для реализации немного сложных и хитрых кнопок, и объясняет, как использовать CSS для их реализации в максимально возможной степени.
Давайте сначала посмотрим на эти формы кнопок, которые часто появляются:
Прямоугольные и закругленные кнопки
Обычно мы сталкиваемся только с двумя типами кнопок — прямоугольными и с закругленными углами:
Они очень простые, ширина и высота, закругленные углы и цвет фона.
<div class='btn rect'>rect</div>
<div class='btn circle'>circle</div>
.btn {
margin: 8px auto;
flex-shrink: 0;
width: 160px;
height: 64px;
}
.rect {
background: #f6ed8d;
}
.circle {
border-radius: 64px;
background: #7de3c8;
}
Трапеция и параллелограмм
Далее, исходя из деформации прямоугольника, часто возникаетТрапеция и параллелограммкнопка.
реализовать их в основном с помощьюtransformХорошо, но будьте осторожны, используйтеtransformПосле этого текст в метке также будет деформироваться таким же образом, поэтому мы обычно используем псевдоэлемент элемента для достижения формы, чтобы текст в кнопке не пострадал.
Параллелограмм
использоватьtransform: skewX()То есть обратите внимание на вышесказанное, используйте псевдоэлемент элемента для реализации параллелограмма, чтобы не затрагивать внутренний текст.
<div class='btn parallelogram'>Parallelogram</div>
.parallelogram {
position: relative;
width: 160px;
height: 64px;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #03f463;
transform: skewX(15deg);
}
}
Если вы не хотите использовать псевдоэлементы, кромеtransform: skewX(), параллелограммы также достижимы с помощью градиентов.
Наверное вот так:
{
background: linear-gradient(45deg, transparent 22%, #04e6fb 22%, #9006fb 78%, transparent 0);
}
трапеция
Трапеция немного сложнее параллелограмма, и в ней используются преимуществаperspective, по сути, с помощью некоего 3D-преобразования. Принцип представляет собой прямоугольник, повернутый вокруг оси X, вот так:
использоватьperspectiveа такжеtransform: rotateX()То есть, конечно, их можно записать вместе:
<div class='btn trapezoid'>Trapezoid</div>
.parallelogram {
position: relative;
width: 160px;
height: 64px;
&::after {
content:"";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transform: perspective(40px) rotateX(10deg);
transform-origin: bottom;
background: #ff9800;
}
}
Срезанные углы — сплошной и градиентный фон
Далее идет скошенная графика, самый распространенный метод в основном с помощью градиентовlinear-gradientРеализация, посмотрите на такой график
<div></div>
.notching {
background: linear-gradient(135deg, transparent 10px, #ff1493 0);
background-repeat: no-repeat;
}
Результат выглядит следующим образом:
Исходя из этого, нам нужно всего лишь использовать несколько градиентов для получения 4 таких графиков и использоватьbackground-positionПозиция по четырем углам:
<div class="notching">notching</div>
.notching {
background:
linear-gradient(135deg, transparent 10px, #ff1493 0) top left,
linear-gradient(-135deg, transparent 10px, #ff1493 0) top right,
linear-gradient(-45deg, transparent 10px, #ff1493 0) bottom right,
linear-gradient(45deg, transparent 10px, #ff1493 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
Используйте clip-path для получения скошенной графики с градиентным фоном
Конечно, у этого метода есть проблема: когда цвет фона должен быть градиентным, этот метод довольно неуклюж.
К счастью, у нас есть другой способ, с помощьюclip-pathВырежьте фигуру со скошенной кромкой, чтобы цвет фона мог быть любым пользовательским цветом, будь то градиент или сплошной цвет:
<div class="clip-notching">notching</div>
.clip-notching {
background: linear-gradient(
45deg,
#f9d9e7,
#ff1493
);
clip-path: polygon(
15px 0,
calc(100% - 15px) 0,
100% 15px,
100% calc(100% - 15px),
calc(100% - 15px) 100%,
15px 100%,
0 calc(100% - 15px),
0 15px
);
}
Просто реализуйте градиентный фон, а затем ядро, на основе графики градиентного прямоугольника, используйтеclip-path: polygon()Вырежьте фигуру, которую мы хотим (8-угольник):
Конечно, в приведенном выше коде очень легко представить следующую 6-стороннюю фигуру, используя градиенты иclip-pathВы можете легко получить:
кнопка со стрелкой
Далее идет кнопка со стрелкой. Внимательно наблюдайте за кнопкой срезанного угла выше. Когда углы с обеих сторон достаточно обрезаны, она принимает форму стрелки.
Мы можем реализовать одну кнопку со стрелкой, используя два градиента:
<div class="arrow">arrow</div>
&.arrow {
background: linear-gradient(
-135deg,
transparent 22px,
#04e6fb 22px,
#65ff9a 100%
)
top right,
linear-gradient(
-45deg,
transparent 22px,
#04e6fb 22px,
#65ff9a 100%
)
bottom right;
background-size: 100% 50%;
background-repeat: no-repeat;
}
Вышла стрелка:
Получается путем объединения верхнего и нижнего блоков градиента, что сразу можно понять по изменению цвета:
Что, если бы это была такая форма стрелки?
То же, это тоже суперпозиция двух градиентов, цвет градиентаПрозрачный --> Цвет A --> Цвет B --> Прозрачный. Конечно, то же самое можно использовать и здесь.clip-path:
дано здесьclip-pathРешение:
{
background: linear-gradient(45deg, #04e6fb, #65ff9a);
clip-path: polygon(
0 0,
30px 50%,
0 100%,
calc(100% - 30px) 100%,
100% 50%,
calc(100% - 30px) 0
);
}
Скругление с надписью
Форма кнопки ниже в основном используется в купонах. Наиболее распространенным решением является использование градиентов. Конечно, в отличие от срезания углов, здесь используются радиальные градиенты.
Во-первых, посмотрите на этот простой пример:
<div></div>
div {
background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 12px);
}
Вы можете получить такой график:
Так что под контролемbackground-size, вы можете получить 4 таких изображения в 4 углах:
<div class="inset-circle">inset-circle</div>
&.inset-circle {
background-size: 70% 70%;
background-image: radial-gradient(
circle at 100% 100%,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 0 0,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 100% 0,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 0 100%,
transparent 0,
transparent 12px,
#2179f5 13px
);
background-repeat: no-repeat;
background-position: right bottom, left top, right top, left bottom;
}
Круглая кнопка с градиентной надписью и маской
Что делать, если цвет фона требует градиента?
Предположим, у нас есть прямоугольный узор фона, нам просто нужно использоватьmaskРеализуйте слой маски, используяmask, просто закройте 4 угла.
maskКод очень похож на приведенный выше код вырезания закругленных углов, вы можете получить кнопку с закругленными углами с градиентной надписью с помощью простого преобразования:
<div class="mask-inset-circle">inset-circle</div>
.mask-inset-circle {
background: linear-gradient(45deg, #2179f5, #e91e63);
mask: radial-gradient(
circle at 100% 100%,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 0 0,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 100% 0,
transparent 0,
transparent 12px,
#2179f5 13px
),
radial-gradient(
circle at 0 100%,
transparent 0,
transparent 12px,
#2179f5 13px
);
mask-repeat: no-repeat;
mask-position: right bottom, left top, right top, left bottom;
mask-size: 70% 70%;
}
Таким образом, мы получаем такой график:
Конечно, чтобы понять приведенный выше код, вам нужно сначала понять CSS.maskПринцип свойств, если вы еще немного с ним не знакомы, можете взглянуть на эту мою статью:
Неправильный прямоугольник со скругленными углами
Следующая форма кнопки также является наиболее часто задаваемым вопросом в последнее время. Давайте сначала посмотрим на ее форму:
Назвать его непросто, одна сторона представляет собой правильный прямой угол со скругленными углами, а другая сторона представляет собой скошенный край со скругленными углами.
На самом деле, это поПрямоугольник с закругленными углами + Параллелограмм с закругленными углами:
Итак, с помощью двух псевдоэлементов их можно легко реализовать:
<div class="skew">Skew</div>
.skew {
position: relative;
width: 120px;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 10px;
background: orange;
transform: skewX(15deg);
}
&::before {
content: "";
position: absolute;
top: 0;
right: -13px;
width: 100px;
height: 64px;
border-radius: 10px;
background: orange;
}
}
Так как один псевдоэлемент накладывается на другой, для одного из них используется градиент, а для другого – сплошной цвет.
Круглая кнопка
Следующая форма кнопки, распространенная на вкладках, похожа на пейджинг Chrome:
Давайте разберем эту форму кнопки, вот на самом деле суперпозиция из 3-х частей:
Просто выясните, как добиться изогнутых треугольников с обеих сторон. Здесь мы по-прежнему используем градиенты --радиальный градиент, на самом деле он такой, как показано на рисунке ниже, нам нужно только заменить черную часть на прозрачную, и использовать два псевдоэлемента:
код показывает, как показано ниже:
<div class="outside-circle">outside-circle</div>
.outside-circle {
position: relative;
background: #e91e63;
border-radius: 10px 10px 0 0;
&::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
left: -20px;
bottom: 0;
background: #000;
background:radial-gradient(circle at 0 0, transparent 20px, #e91e63 21px);
}
&::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
right: -20px;
bottom: 0;
background: #000;
background:radial-gradient(circle at 100% 0, transparent 20px, #e91e63 21px);
}
}
получить:
Полный код для всех приведенных выше графиков вы можете увидеть здесь:Демонстрация CodePen -- Различные формы кнопок CSS | Различные формы кнопок CSS
В заключение
Основываясь на приведенной выше реализации, нетрудно обнаружить, что некоторые слегка специальные кнопки реализованы путем сращивания, завязывания глаз, маскирования и т. д.
И в нем:
- Градиент (линейный градиент
linear-gradient, радиальный градиентradial-gradient, несколько градиентов) - маска
mask - обрезать
clip-path - деформация
transform
Играя важную роль и умело используя их, мы можем обращаться с этими графиками на кончиках пальцев, а также спокойно сталкиваться с основанными на них деформациями.
Приведенный выше график в сочетании сfilter: drop-shadow(), в основном можно добиться неравномерных теней.
Опять же, более сложный график, как показано ниже:
Давайте сократим картину: хотя CSS хорош, соотношение ввода-вывода также необходимо учитывать при реальном использовании.
наконец
Цель этой статьи - скорее простое руководство.На практике могут быть лучшие способы достижения вышеперечисленных эффектов.Эта статья не перечисляет их один за другим, и дополнительные исправления приветствуются.
Хорошо, это конец этой статьи, я надеюсь, что эта статья поможет вам :)
Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄
Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.
Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.