В некоторых лицах нейтрализованы, часто мы видим связанные темы будут иметь CSSКак нарисовать треугольник с помощью CSS, и общий ответ, как правило, это только один из способов использования границы для рисования.
С развитием CSS и по сей день существует много интересных способов рисования треугольников только с помощью CSS, в этой статье мы подробно их перечислим.
Благодаря этой статье вы можете узнать6Существует множество способов рисования треугольников с помощью CSS, и все они довольно просты в освоении.
Конечно, эта статья является лишь руководством, CSS меняется с каждым днем, и могут быть какие-то интересные методы, которые упущены в этой статье, вы можете добавить их в область сообщений~
Используйте границу, чтобы нарисовать треугольник
Использование границ для реализации треугольников должно быть освоено большинством людей, и это часто можно увидеть в различных аспектах, используя контейнеры с нулевой высотой и шириной и прозрачными границами.
Простой код выглядит следующим образом:
div {
border-top: 50px solid yellowgreen;
border-bottom: 50px solid deeppink;
border-left: 50px solid bisque;
border-right: 50px solid chocolate;
}
Для контейнеров с нулевой высотой и шириной установите границы разных цветов:
Таким образом, пусть цвет любой трехсторонней границы будетtransparent, очень легко получить треугольники с различными углами:
Демонстрация CodePen — треугольник с рамкой
Нарисуйте треугольники, используя линейный градиент
Далее используем линейный градиентlinear-gradientОсознайте треугольник.
Его принцип также очень прост, мы реализуем45°Градиент:
div {
width: 100px;
height: 100px;
background: linear-gradient(45deg, deeppink, yellowgreen);
}
Измените его цвет с градиента на два фиксированных цвета:
div {
width: 100px;
height: 100px;
background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}
Затем сделайте один из цветов прозрачным:
div {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}
путем вращенияrotateилиscale, мы также можем получить различные углы и треугольники разных размеров, полную демонстрацию можно щелкнуть здесь:
Демонстрация CodePen — реализация треугольника с использованием линейных градиентов
Нарисуйте треугольники с помощью конического градиента
Или градиент, мы использовали линейный градиент для реализации треугольника выше.Интересно, что в семействе градиентов угловой градиентconic-gradientМожет также использоваться для реализации треугольников.
Метод такой,Центральная точка углового градиента может быть установлена, также можно установить центральную точку радиального градиента.
Мы устанавливаем центральную точку углового градиента в50% 0, то есть,center top, верхняя середина контейнера, а затем угловой градиент, градиент до определенного диапазона углов — все это треугольные формы.
Предположим, у нас есть200px x 100pxВысота и ширина контейнера, установите его центральную точку углового градиента как50% 0:
и установите его из90°Начните рисовать карту углового градиента, схематическая диаграмма выглядит следующим образом:
Видно, что в начале графики углового градиента все треугольники до достижения второй стороны Мы можем легко получить треугольник, выбрав подходящий угол:
div {
background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg);
}
в приведенном выше коде deeppink 45deg, transparent 45.1degДополнительный0.1degзаключается в простом устранении эффекта алиасинга, создаваемого градиентом, так что мы передаемconic-gradient, а также легко получить треугольник.
Таким же образом с вращениемrotateилиscale, мы также можем получить различные углы и треугольники разных размеров, полную демонстрацию можно щелкнуть здесь:
Демонстрация CodePen — реализация треугольника с использованием угловых градиентов
transform: повернуть с переполнением: скрытый для рисования треугольников
Этот метод является относительно традиционным, с использованиемtransform: rotateСотрудничатьoverflow: hidden. Вы можете понять это с первого взгляда, и вы узнаете, как только вы это узнаете.Простая схема анимации выглядит следующим образом:
Установите центр вращения графика в левом нижнем углу.left bottom, вращаться, соответствоватьoverflow: hidden.
Полный код:
.triangle {
width: 141px;
height: 100px;
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: deeppink;
transform-origin: left bottom;
transform: rotate(45deg);
}
}
Демонстрация CodePen - преобразование: поворот с переполнением: скрыто для получения треугольника
Используйте clip-path для рисования треугольников
clip-pathОчень интересное свойство CSS.
clip-pathСвойства CSS могут создавать область отсечения, в которой может отображаться только часть элемента. Часть внутри области отображается, а часть вне области скрыта. Области отсечения — это пути, определяемые встроенными URL-адресами или внешними SVG, на которые есть ссылки.
То есть с помощьюclip-pathКонтейнер можно обрезать как угодно.
Через 3 точки координат реализуется многоугольник, а лишнее пространство будет обрезано.Код тоже очень простой:
div {
background: deeppink;
clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
Демонстрация CodePen — треугольник с использованием clip-path
На этом сайте --CSS clip-path maker, вы можете быстро создавать простыеclip-pathГрафика, получите соответствующий код CSS.
Нарисуйте треугольники с символами
Хорошо, последний, несколько уникальный, заключается в использовании символов для представления треугольников.
Десятичные представления Unicode для некоторых символов треугольной формы перечислены ниже.
◄ : ◄
► : ►
▼ : ▼
▲ : ▲
⊿ : ⊿
△ : △
Например, мы используем▼ Чтобы реализовать треугольник ▼, код выглядит следующим образом:
<div class="normal">▼ </div>
div {
font-size: 100px;
color: deeppink;
}
Эффект хороший:
Однако следует отметить, что использование символов для представления треугольников сильно связано с текущим установленным шрифтом, и один и тот же символ, нарисованный разными шрифтами, не одинаков.Google FontНесколько разных шрифтов выбираются случайным образом для представления одного и того же символа, и эффект выглядит следующим образом:
Как видите, форма, размер и базовая линия разных шрифтов различаются, поэтому, если вы хотите использовать треугольники символов, убедитесь, что в браузере пользователя установлен указанный вами шрифт, в противном случае не используйте этот метод.
Для полного сравнения демо, вы можете нажать здесь:
Демонстрация CodePen — реализация треугольника с использованием символов
наконец
Хорошо, это конец этой статьи, о 6 различных способах рисования треугольников с помощью CSS, надеюсь, это поможет :)
Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄
Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.
Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.