带箭头的css按钮......如何移动箭头

Question

我正在尝试制作一个带有箭头的基本按钮框...

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

我希望它看起来像pic

Answer 1

为了实现您需要更改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; 
}

Answer 2

试试这个，显示：阻止你的箭头仍在中间：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>