我想使用纯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年肯定会有更好的方法吗?
答案 0 :(得分:8)
这是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;
}
了解行动:
注意:强>
您只需更改border-width
定义中的margin-top
和.bubble:after
值(目前设置为15px和-15px)即可调整箭头大小
要确保它保留边框,您还需要在.bubble:before
定义中更改这两个相同的值(当前设置为16px和-16px)