Я хочу сделать этим треугольником углубление посередине, и я не хочу никаких дополнительный HTML.
<span class="dropdown">dropdown</span>
.dropdown:after
{
display: inline-block;
margin-left: 4px;
content: '';
border-top: 5px solid rgba(0,0,0,.2);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
Желаемый результат
Как я могу это сделать?
Попробуй это:
.dropdown:after {
display: inline-block;
position: relative;
content: "";
top: -2px;
right: 0;
margin-left: 4px;
width: 6px;
height: 6px;
transform: rotate(45deg);
border-right: 2px solid rgba(0,0,0,.2);
border-bottom: 2px solid rgba(0,0,0,.2);
}
Обратите внимание, что есть и другие варианты, например шрифты значков, фоновые изображения и т. д.
Используя только CSS, я не уверен, как создать закругленные концы стрелки. Но чтобы создать линейную стрелку, вы можете наложить элементы :before и :after друг на друга следующим образом:
.dropdown {
position: relative;
}
.dropdown:after {
position: absolute;
right: -12px;
top: 7px;
content: '';
border-top: 3px solid rgb(255, 255, 255);
border-right: 3px solid transparent;
border-left: 3px solid transparent;
z-index: 1001;
}
.dropdown:before {
position: absolute;
right: -14px;
top: 7px;
content: '';
border-top: 5px solid rgb(0, 0, 0);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
z-index: 1000;
}<span class="dropdown">dropdown</span>
