使用CSS可以绘制一个有半透明边框的箭头吗?
到目前为止,我一直在努力,
http://jsfiddle.net/calebo/fBW4u/
CSS:
.ui-overlay { padding-bottom: 10px; position: relative; } .ui-overlay-content { background: #999; color: #000; padding: 8px; border-radius: 4px; border: 5px solid rgba(0,0.2); background-clip: padding-Box; height: 100px; width: 200px; } .arrow { border-color: #999 transparent transparent; border-style: solid; border-width: 10px 10px 0; bottom: 5px; left: 15px; width: 0; height: 0; position: absolute; overflow: hidden; }
解决方法
这仍然需要一些工作,但这里是一般的想法:
使用伪元素,旋转45度并将样式应用于:
.arrow { bottom: -25px; left: 30px; width: 40px; height: 40px; position: absolute; overflow: hidden; } .arrow:after { content: ' '; display: block; background: red; width: 20px; height: 20px; transform: rotate(45deg); position: absolute; top: -19px; left: 3px; background: #999; border: 5px solid rgba(0,0.2); background-clip: padding-Box; }
这是小提琴:http://jsfiddle.net/yZ3vB/
这样做的问题是边框重叠,使边缘变暗。
这可能通过添加另一个元素来补救。
更新:是的你去:http://jsfiddle.net/sJFTT/
更新2:您甚至不需要额外的元素。您可以使用主框中的伪元素:
.ui-overlay-content:after { content: ' '; border-width: 13px; border-color: #999 transparent transparent; border-style: solid; bottom: -10px; left: 30px; width: 0; height: 0; position: absolute; }
这是小提琴:http://jsfiddle.net/6v9nV/
更新3:实际上,您只需单个元素即可完成所有这些操作,而无需使用伪元素即前一个和后一个:
.speech-bubble { background: #999; background: linear-gradient(top,#444 0%,#999 100%); background-clip: padding-Box; border: 5px solid rgba(0,0.2); padding: 20px; width: 200px; height: 100px; position: relative; } .speech-bubble:before{ content: ' '; border-color: rgba(0,0.2) transparent transparent; border-style: solid; border-width: 17px; position: absolute; bottom: -39px; left: 16px; } .speech-bubble:after{ content: ' '; border-color: #999 transparent transparent; border-style: solid; border-width: 13px; position: absolute; bottom: -26px; left: 20px; }
这是小提琴:http://jsfiddle.net/95vvr/
附:不要忘记生产中的供应商前缀!