我有一个半径按钮,想在此按钮内添加一个向下箭头图标。
这是我目前所拥有的:
.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是一把 fiddle 。
为什么箭头不在按钮内?
这是我想要的:
最佳答案
.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>
关于javascript - 将向下箭头 css 添加到半径按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32839191/