Используйте границу в CSS, чтобы сделать маленькие треугольники
Как мы все знаем, граница элемента — это одна или несколько линий, окружающих содержимое и отступы элемента. Свойство CSS border позволяет указать стиль, ширину и цвет границы элемента.
В HTML мы используем таблицы для создания границ вокруг текста, но с помощью свойств границ CSS мы можем создавать границы, которые отлично работают и могут применяться к любому элементу.
Внутри полей элемента находится граница элемента. Граница элемента — это одна или несколько линий, окружающих содержимое элемента и внутренние данные.
Давайте посмотрим на эффекты некоторых элементов с установленными границами.
div{
width: 100px; height: 20px;
border: 20px solid red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: black;
}
Эффект следующий:
Когда мы пытаемся уменьшить ширину и высоту блока или даже удалить его:
div{
width: 20px; height: 20px;
border: 20px solid red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: black;
}
Эффект следующий:
div{
width: 0;
border: 20px solid red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: black;
}
Эффект следующий:
На данный момент мы обнаруживаем, что когда ширина и высота элемента равны 0, он станет четырьмя сжатыми вместе треугольниками. Следовательно, мы можем думать, что если цвет трех границ определить прозрачным, то мы получим треугольник!
Установите цвет трех границ на прозрачный:
p{
width: 0;
border: 20px solid transparent;
border-top-color: blue;
}
Эффект следующий:
С помощью кода мы обнаруживаем, что ориентация маленького треугольника совпадает с настройкойнепрозрачныйСторона цвета находится в направлении, противоположном названию.
Например, мы устанавливаем границу-top-color: синий; ориентация небольшого треугольника в направленииВнизиз.
намекать
Когда мы используем маленький треугольник, поскольку четыре границы образуют прямоугольник, мы просто устанавливаем для трех других сторон прозрачный цвет, и они по-прежнему занимают позицию в документе.Для удобства компоновки мы можем установить противоположную сторону маленький треугольник как ничто; конкретный принцип заключается в следующем:
div{
width: 0; height: 0;
border-top: 20px solid blue;
border-left: 20px solid red;
border-right: 20px solid green;
border-bottom: none;
}
Эффект следующий:
div{
width: 0;
bordet:20px solid transparent;
border-top: 20px solid blue;
border-bottom: none;
}
Эффект следующий:
апплет
Когда мы хотим сделать такой макет, мы можем использовать этот метод для создания маленьких треугольников, и нам не нужно использовать img или фон для этого.
<style>
ul {
overflow: hidden;
}
li {
list-style: none;
line-height: 60px;
text-align: center;
float: left;
width: 120px;
background: #f1f1f1;
margin-right: 1px
}
li p {
width: 0;
border: 8px solid transparent;
border-bottom-color: #666;
border-top: none;
float: right;
margin: 26px 10px 0 0
}
</style>
<ul>
<li>我的课程<p></p></li>
<li>最近浏览<p></p></li>
<li>联系客服<p></p></li>
</ul>
Эффект следующий:
небольшое расширение
<style>
div{
margin: 50px
}
div:nth-child(1){
width: 0;
border: 30px solid transparent;
border-bottom: 80px solid red;
/* border-top: none; */
}
div:nth-child(2){
width: 0;
border-top: 30px solid blue;
border-right:none;
border-left: 90px solid transparent;
border-bottom: none;
}
div:nth-child(3){
width: 0;
border-top: 30px solid blue;
border-right:90px solid transparent;
border-left: 10px solid transparent;
border-bottom: none;
}
</style>
<div></div>
<div></div>
<div></div>
Эффект следующий:
Мы также можем установить края границ на разные пиксели для достижения желаемого эффекта.