html – 使用CSS显示箭头

概述我想在我的内容DIV旁边显示一个箭头. 它应该与此类似 – 我的问题是当我向DIV添加内容时,我无法将箭头头部垂直放在内容DIV的中心. 这是我的HTML和CSS <div id="mybox"> <p></p></div>#mybox { width:200px; min-height:100px; background-color:green; 我想在我的内容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

谢谢.

解决方法 由于箭头的高度已知,您可以使用50％的最高值,然后使用负边距顶部来取代箭头的高度：

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

总结

以上是内存溢出为你收集整理的html – 使用CSS显示箭头全部内容，希望文章能够帮你解决html – 使用CSS显示箭头所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。