我試圖創建下面的提示(不中的內容 - 只是盒子&箭頭):CSS只有 - 工具提示使用前向箭頭
我有得到的問題箭頭與主箱子正確混合。
我用迄今爲止的代碼創建了Fiddle here。
你會注意到箭頭看起來不錯,但不適合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://stackoverflow.com/questions/25901148/shadows-on-三邊只有多個插入框陰影和alpha透明/ 25901339#25901339它可能有一些幫助。 – 2014-10-03 03:27:39