Heim  >  Artikel  >  Web-Frontend  >  CSS实现带有三角小箭头的矩形效果_html/css_WEB-ITnose

CSS实现带有三角小箭头的矩形效果_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:31:011931Durchsuche

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">&#9670</div>    <div class="y">&#9670</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