Добавить стрелку вниз css к кнопке радиуса

У меня есть кнопка радиуса и вы хотите добавить значок со стрелкой вниз внутри этой кнопки.Добавить стрелку вниз css к кнопке радиуса

Вот то, что я до сих пор:

.test { 
 
    border: 2px solid #ffffff; 
 
    background: #444444; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 6px; 
 
    text-align: center; 
 
    color:#ffffff; 
 
} 
 
.down { 
 
    position : absolute; 
 
    top  : 6px; 
 
    left  : 10px; 
 
    width : 0; 
 
    height : 0; 
 
    z-index : 100; 
 
    border-left : 10px solid transparent; 
 
    border-right : 10px solid transparent; 
 
    border-top : 10px solid white; 
 
}

<div class="test "> 
 
    <div class="down"> </div> 
 
</div>

Только в случае, если фрагмент кода не работает, here является скрипку.

Почему в стрелке нет кнопки?

Вот что я хочу:

источник

2015-09-29 Phạm Quốc Bảo

Ну для начала, ваша скрипка попадает в класс '.down ' – timo

http://jsfiddle.net/v783us3w/4/ – akash

.test { 
 
    border: 2px solid #ffffff; 
 
    background: #444444; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 6px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.down { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 0; 
 
    height: 0; 
 
    z-index: 100; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    border-top: 10px solid white; 
 
    margin: auto; 
 
}

<div class="test "> 
 
<div class="down"> </div> 
 
</div>

источник

2015-09-29 08:29:14 akash

попробуйте использовать postion:relative; maring:0px auto; для down класса

источник

2015-09-29 08:28:31

, если вы хотите знать, как показать стрелку, вы можете используйте Boot Strap, добавив его ссылку поверх вашего HTML-кода и используйте его компоненты:

.test { 
 
    border: 2px solid #ffffff; 
 
    background: #444444; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 6px; 
 
    text-align: center; 
 
    
 
} 
 

 
.down-arrow{ 
 
    margin-top:7px; 
 
    
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    
 
    <!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    
 
    <title></title> 
 
\t <meta charset="utf-8" /> 
 
</head> 
 
<body> 
 
<div class="test"> 
 
    <span class="glyphicon glyphicon-arrow-down down-arrow" aria-hidden="true" style="color:white;"></span> 
 
    </div> 
 
</body> 
 
</html>

есть еще один простой способ, в котором вы можете использовать шрифт удивительные компоненты, проверить его на Google

источник

2015-09-29 08:58:32

Добавить стрелку вниз css к кнопке радиуса

ответ

Смежные вопросы