我试图通过 CSS 向链接按钮的底部添加一个白色箭头。但是,我无法将所有按钮的箭头统一居中。
HTML:
<div class="help-buttons">
<a href="#" class="help-button">User Information</a>
<a href="#" class="help-button">Company Information</a>
<a href="#" class="help-button">Driver Information</a>
</div>
CSS:
.help-buttons {
margin: 75px auto;
text-align: center;
}
.help-button {
background: #1795db;
color: #fff;
padding: 15px 20px;
font-family: 'Open sans';
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.2);
margin: 0 30px;
}
.help-button:after {
content: "";
position: absolute;
margin-top: 25px;
margin-left: -75px;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-bottom: 13px solid #ffffff;
}
最佳答案
制作
.help-button
position: relative;
以便箭头相对于按钮定位。:after
上的负边距应与边框大小相同。调整
bottom: -6px
以获得您想要的大小。
HTML
<div class="help-buttons">
<a href="#" class="help-button">User Information</a>
<a href="#" class="help-button">Company Information</a>
<a href="#" class="help-button">Driver Information</a>
</div>
CSS
.help-buttons {
margin: 75px auto;
text-align: center;
}
.help-button {
background: #1795db;
color: #fff;
padding: 15px 20px;
font-family: 'Open sans';
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.2);
margin: 0 30px;
position: relative;
}
.help-button:after {
content: "";
position: absolute;
left: 50%;
bottom: -6px;
margin-left: -13px;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-bottom: 13px solid #ffffff;
}
关于html - 将箭头选择器添加到按钮中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25252177/