CSS: Треугольник с искривлением в середине

Question

Я хочу дать this triangle dip в середине, и я не хочу никакого дополнительного 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; 
} 

Желаемый результат

Как я могу это сделать?

Answer 1

Попробуйте это:

.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); 
} 

Fiddle here

Обратите внимание, что есть и другие варианты тоже есть значок шрифты, фоновые изображения и т.д.

Answer 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>