CSS实现的带有箭头的矩形效果实例代码_html/css

Heim

Web-Frontend

HTML-Tutorial

CSS实现的带有箭头的矩形效果实例代码_html/css_WEB-ITnose

Jun 24, 2016 am 11:31 AM

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>

Nach dem Login kopieren

以上代码实现了带有箭头的矩形效果，下面介绍一下此效果的实现过程。
一.实现原理:
原理很简单，就是设置两个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>

Nach dem Login kopieren

上面的绿色三角形就是我们要显示的三角形效果，但是我们要的是细线边框的三角形，所以再用一个这样的三角形来和它重叠，然后利用定位差，实现边框效果。原理大体如此，当然覆盖在它上面的三角形背景是白色的。

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

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

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