Home >Web Front-end >HTML Tutorial >CSS实现的带有箭头的矩形效果实例代码_html/css_WEB-ITnose
CSS实现的带有箭头的矩形效果实例代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:101750browse
CSS实现的带有箭头的矩形效果实例代码:
带有箭头的矩形效果现在应用非常的广泛，例如危险的信息是带有箭头矩形效果，当然它们的实现原理和咱们是不一样的，在网页中当然也有这样的应用，例如弹出信息提示说明，可以用箭头用来作为方位提示，下面就用实例代码简单介绍一下。
代码实例如下:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>三种纯CSS实现三角形的方法</title> <style type="text/css"> .message-box { position:relative; width:240px; height:60px; line-height:60px; border:1px solid #000; text-align:center; color:#0C7823; } .triangle-border { position:absolute; left:100px; overflow:hidden; width:0; height:0; border-width:10px; border-style:none dashed solid dashed; } .tb-border { top:-10px; border-color:#000 transparent #000 transparent; } .tb-background { top:-9px; border-color:transparent transparent #fff transparent; }</style> </head> <body> <div class="message-box"> <span>border属性实现</span> <div class="triangle-border tb-border"></div> <div class="triangle-border tb-background"></div> </div> </body> </html>
以上代码实现了带有箭头的矩形效果，下面介绍一下此效果的实现过程。
一.实现原理:
原理很简单，就是设置两个div的边框，然后让这个两个div重合，并且给它们使用top属性值，相差1px，这样露出来的就是三角形的轮廓，为了更容易理解此效果，先看一段代码:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">div { width:0px; height:0px; border-bottom:50px solid green; border-left:50px solid blue; border-right:50px solid red; border-top:none;}</style></head><body><div></div></body></html>
上面的绿色三角形就是我们要显示的三角形效果，但是我们要的是细线边框的三角形，所以再用一个这样的三角形来和它重叠，然后利用定位差，实现边框效果。原理大体如此，当然覆盖在它上面的三角形背景是白色的。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9801
更多内容可以参阅:http://www.softwhy.com/divcss/
Statement：
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
Previous article：前端需要点亮的技能树（2015年12月31日更新）_html/css_WEB-ITnoseNext article：两列布局的设置方法总结_html/css_WEB-ITnose