Анализ принципа рисования треугольника на чистом CSS

внешний интерфейс CSS

# Чистый CSS анализ принципа рисования треугольника Поскольку раньше на странице появлялось много треугольников, поначалу было не очень удобно использовать изображения напрямую, и было трудно настроить цвета, которые всегда были странными. Он был таким же, как фон, поэтому я искал волна кода и использовал его напрямую.Подумав об этом, я не знаю, каков конкретный принцип, и очень странно, почемуРамкаМожет быть установлен в стиле треугольника. Поэтому я искал волну принципов и разбирал их следующим образом.

1. Какая рама?

Потому что очень толстые рамки используются редко, а в 90% случаев мы используем рамки одного цвета. Так что я обнаружил, что не знал, как на самом деле выглядит граница, я все время думал, что все четыре стороны представляют собой линию (не говорите мне, что я единственный, кто так думает).

Немного поэкспериментировав, я обнаружил, что когда граница становилась все толще и толще, было очевидно, что каждая сторонатрапеция

2. Как сделать треугольник?

Потому что код, который вы читали раньше, будет написанwidth: 0; height: 0;Тогда я не понимал почему, но сейчас легко подумать, что при экстремальном мышлении, когда размер контентаподход и нолькаждая сторона - треугольник.

В это время вы можете видеть, что треугольник появился.Все, что нам нужно сделать, это сделать остальные ребра прозрачными, чтобы получить нужный нам треугольник.

3. Есть ли еще дела?

Следующие ситуации обнаруживаются при отмене границ соответственно:

  • При отмене ребра контактная часть двух ребер, примыкающих к этому краю, станет прямой
  • Когда есть только смежные стороны, две стороны становятся треугольниками, делящимися пополам.
  • В предельном случае все исчезает, когда нет других касаний к зарезервированному ребру.

图像 022.png
图像 023.png
图像 024.png
图像 025.png
图像 026.png
图像 027.png

4. Развернуть

Поняв это, становится ли очень ясно смотреть на код? Затем мы можем сделать больше форм треугольников. С этими формами и свойствами поворота можно использовать практически любую сцену.

прямоугольный треугольник

图像 028.png

.box {
    /* 内部大小 */
    width: 0px;
    height: 0px;
    /* 边框大小 只设置三条边*/
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-left: transparent solid;
    border-width: 85px; 
    /* 其他设置 可有可无*/
    margin: 50px;
}

меньший прямоугольный треугольник

Используйте противоположную сторону, чтобы сделать меньший прямоугольный треугольник

图像 029.png

.box {
    /* 内部大小 */
    width: 0px;
    height: 0px;
    /* 边框大小 只设置两条边*/
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-width: 85px; 
    /* 其他设置 */
    margin: 50px;
}

равнобедренный остроугольный треугольник

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

图像 030.png

.box {
    /* 内部大小 */
    width: 0px;
    height: 0px;
    /* 边框大小 */
    border-top: #4285f4 170px solid;
    border-right: transparent 85px solid;
    border-left: transparent 85px solid;
     
    /* 其他设置 */
    margin: 50px;
}

диалоговое окно

Установите псевдоэлемент в виде треугольника, а затем определите положение путем позиционирования, вы можете создать классический диалоговый пузырь.

气泡

.bubbly {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #00ccbb;
    border-radius: 8px;
    width: 200px;
    padding: 40px 10px;
    text-align: center;
    color: white;
    font-size: 20px;

.bubbly:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    border: 34px solid transparent;
    border-top-color: #00ccbb;
    border-bottom: 0;
    border-left: 0;
    margin: 0 0 -34px -17px;
}

Суммировать

Установив длину четырех сторон, можно также создавать различные треугольники и задавать почти все формы треугольников. Кроме того, вы можете установитьОдин элемент широкой средней школы равен 0, а другой не равен 0, чтобы установить форму формы тела, вы можете свободно экспериментировать

Категории