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

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

WBOY
Release: 2016-06-24 11:31:01
Original
1937 people have browsed it

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>
Copy after login

 

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

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

 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template