带有箭头的css按钮..。如何移动箭头
带有箭头的css按钮..。如何移动箭头
提问于 2013-12-18 08:59:51
我试着做一个基本的按钮盒，上面有一个箭头.
http://jsfiddle.net/8K4qB/ .这就是结果..。我不能让它在底部中间的顶部对齐。
HTML代码
<a href="" class="button test">Read More</a>CSS代码
.button {
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: #2ecc71;
}
.test:before {
content:'';
position: absolute;
width: 0;
height: 0;
border-bottom: 20px solid #3498db;
border-right:50px solid transparent;
border-left:50px solid transparent;
}
我想让它看起来像照片
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-12-18 09:04:22
为了实现特定的行为，您需要更改HTML和CSS- -否则，您将无法集中地正确地证明伪元素的正确性。根据需要更改示例中的元素(例如，顶层div可以更改为a.button.test)
REVISED FIDDLE
HTML
<div>
<div></div>
<div>text goes here</div>
</div>CSS
div {
display:inline-block;
text-align:center;
}
div div:first-child {
display:block;
width: 0;
height: 0;
border-bottom: 10px solid darkorange;
border-right:30px solid transparent;
border-left:30px solid transparent;
margin: 0 auto;
}
div div:last-child{
display:block;
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: darkorange;
position:relative;
text-transform:uppercase;
}Stack Overflow用户
发布于 2013-12-18 09:05:30
试试这个，显示:阻止，这样你的箭头仍然在中间：DEMO
CSS：
.button {
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: #2ecc71;
display:block;position:relative;top:20px;
}
.test:before {
content:'';
position: absolute;
top:-20px;
width: 0;
height: 0;
border-bottom: 20px solid #3498db;
border-right:50px solid transparent;
border-left:50px solid transparent;
}
.middle{
padding-left:15px;
}HTML：
<a href="" class="button test"><span class="middle">Read More</span></a>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20653582
复制相关文章
相似问题
腾讯云开发者
