Heim > Artikel > Web-Frontend > CSS实现带有三角小箭头的矩形效果_html/css_WEB-ITnose
CSS实现带有三角小箭头的矩形效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:011919Durchsuche
CSS实现带有三角小箭头的矩形效果:
现在比较流行带有小箭头的矩形效果，比如鼠标放上去弹出的提示效果，还有微信类似的对话内容等，从视觉上较为美观，也比较人性化，如果是CSS3的话比较容易实现，但是当前还存在着很大的浏览器兼容性，下面介绍一种能够兼容所有的浏览器的代码。
代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style>.w { width:200px; position:absolute; background:#999; left:400px; top:200px; font-size:12px; text-align:left}.x { width:180px; position:relative; background:#ff9; border:1px solid #F96; padding:10px; left:-4px; top:-4px;}.y, .z { position:absolute; left:130px;}.y { color:#ff9; top:-6px;}.z { color:#f96; top:-7px;}</style></head><body><div class="w"> <div class="x"> <p>蚂蚁部落欢迎您</p> <div class="z">◆</div> <div class="y">◆</div> </div></div></body></html>
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11571
更多内容可以参阅:http://www.softwhy.com/divcss/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS秘密花园:单面阴影_html/css_WEB-ITnoseNächster Artikel：影响布局的inline-block的空白符的问题_html/css_WEB-ITnose