用CSS显示箭头

Question

我正在尝试在我的内容DIV旁边显示一个箭头。

它应该与此类似 -

我的问题是当我向DIV添加内容时，我无法将箭头保持在内容DIV的垂直中心。

这是我的HTML和CSS

<div id="mybox">
  <p></p>
</div>


#mybox {
    width:200px;   
    min-height:100px;
    background-color:green;
    position:relative;
}

#mybox:after {
    content:"";
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    position: absolute;
    border-left: 20px solid #f00;
    width: 0; 
    height: 0; 
    right: -20px;
    top: 20px; 
}

有谁能告诉我如何解决这个问题？

CSSDESK

谢谢。

Answer 1

由于箭头的高度已知，您可以使用top值50%，然后使用负margin-top来取代箭头的高度：

Example Here - 现在适用于动态内容。

#mybox:after {
    content:"";
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    position: absolute;
    border-left: 20px solid #f00;
    width: 0;
    height: 0;
    right: -20px;
    top: 50%;
    margin-top: -20px;
}

或者，如果箭头的高度未知，则可以使用以下代码：

Example Here

#mybox:after {
    /* Other properties.. */
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

Answer 2

http://jsfiddle.net/9k9Gu/

使用

top:50%;
margin:-20px 0 0 0;

Answer 3

在使用双向完成div之前显示箭头，您可以创建两个div，也可以使用div {/ 1}}或:before

以此为例

:after

.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #f3f300;
  margin-left: 60px;
  transform: translateX(-50%);
  -webkit-transform: translate(-50%);
}

.big-reward {
  background-color: #faf300;
  padding: 10px;
  text-align: justify;
  width: 100px;
  margin-left: 0;
  color: #e21111;
}

嘿，还要查看jsfiddle link

参考：W3CodeSchool.com