我正在尝试创建以下工具提示(而不是其中的内容-只是方框和箭头):
我在让箭头与主框正确融合方面遇到问题。
您会注意到箭头看起来还可以,但并不适合100%,我不确定如何完成。
下面是箭头代码:
.arrow_box:after, .arrow_box:before {
border: 11px solid;
border-color: inherit;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
position: absolute;
content: '';
left: 90%;
bottom: 100%;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #f3f3f3;
border-width: 13px;
margin-left: -23px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #e1e1e1;
border-width: 15px;
margin-left: -25px;
}
http://jsfiddle.net/9uppsLqa/5/
.arrow_box {
border-radius: .1875em;
z-index: 99;
position: relative;
box-shadow: 0 0 0 1px rgba(0,0,0,0.15),inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 2px -2px rgba(0,0,0,0.2),0 0 1px 1px rgba(0,0,0,0.15);
background-repeat: repeat-x;
background-position: 0 0;
background-image: linear-gradient(to bottom,rgba(255,255,255,0.7) 0,rgba(255,255,255,0) 100%);
background-color: #e1e1e1;
margin-top: 3em;
margin-left: .75em;
margin-right: .75em;
padding-left: 0;
padding-bottom: 0;
padding-right: 0;
padding-top: 0;
width: 340px;
height: 160px;
}
.arrow_box:after, .arrow_box:before {
border: 13px solid transparent;
position: absolute;
content: '';
left: 90%;
bottom:100%;
}
.arrow_box:after {
border-bottom-color: #fafafa;
border-width: 14px;
margin-left: -24px;
}
.arrow_box:before {
border-bottom-color: #999;
border-width: 15px;
margin-left: -25px;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句