I'm trying to make something like this:
我想使用纯CSS。 Bootstrap v3 已加载。
我已经非常接近类似的事情了
.bubble {
position:relative;
left: 15px;
padding: 10px;
background: #FFFFCC;
margin: 5px 5px;
max-width: 250px;
border: #FFCC00 solid 1px;
}
.bubble:before {
position:absolute;
content: "";
top:15px;left:-10px;
border-width: 10px 15px 10px 0px;
border-color: transparent #FFFFCC;
border-style: solid;
}
但结果并不完全是我想要的。
我四处搜索并摆弄了一下,但没有找到适合我需求的优雅解决方案。
几年前我会用表格和图像来完成此操作,但 2015 年肯定有更好的方法吗?
这是2015年的版本...
.bubble {
position: relative;
background: #FFFFCC;
border: 1px solid #FFCC00;
max-width:250px;
padding:10px;
font-family:arial;
margin:0 auto;
font-size:14px;
border-radius:6px;
}
.bubble:after,
.bubble:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble:after {
border-color: rgba(255, 255, 204, 0);
border-right-color: #FFFFCC;
border-width: 15px;
margin-top: -15px;
}
.bubble:before {
border-color: rgba(255, 204, 0, 0);
border-right-color: #FFCC00;
border-width: 16px;
margin-top: -16px;
}
查看实际应用:
http://jsfiddle.net/ajahb5p1/ http://jsfiddle.net/ajahb5p1/
NOTE:
您只需更改箭头即可调整箭头的大小border-width
and margin-top
中的值.bubble:after
定义(当前设置为 15px 和 -15px)
为了确保它保留其边框,您还需要更改这两个相同的值.bubble:before
定义(当前设置为 16px 和 -16px)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)