Html 用CSS显示箭头

我试图在我的内容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; 
}

#我的盒子{
宽度：200px；
最小高度：100px；
背景颜色：绿色；
位置：相对位置；
}
#mybox:之后{
内容：“；
边框顶部：20px实心透明；
边框底部：20px实心透明；
位置：绝对位置；
左边框：20px实心#f00；
宽度：0；
身高：0；
右：-20px；
顶部：20px；
}

有人能告诉我如何解决这个问题吗

---

谢谢。

由于箭头的高度是已知的，您只需使用

top

值

50%

，然后使用负数

边距top

来替换箭头的高度：

-现在可用于动态内容

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

或者，如果不知道箭头的高度，可以使用以下选项：

使用

---

使用双向按钮在完成div之前显示箭头您可以创建两个div，也可以使用div用户

：before

或

：after

就拿这个例子来说

。向上箭头{
宽度：0；
身高：0；
左边框：10px实心透明；
右边框：10px实心透明；
边框底部：10px实心#F300；
左边距：60像素；
转化：translateX（-50%）；
-webkit转换：翻译（-50%）；
}
.大酬劳{
背景色：#faf300；
填充：10px；
文本对齐：对齐；
宽度：100px；
左边距：0；
颜色：#e21111；
}

$452
大奖赏这里是一个示例文本。

在这里询问之前，我尝试了

top:50%

，但无法使其工作。无论如何，这是一个很棒的解决方案。非常感谢你。

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

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