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

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

WBOY
Freigeben: 2016-06-24 11:31:01
Original
1945 Leute haben es durchsucht

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>
Nach dem Login kopieren

 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11571

更多内容可以参阅:http://www.softwhy.com/divcss/

 

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage