用CSS3实现带小三角形的div框
发布时间：2016年2月3日 作者：未知 查看次数：1305
用CSS3实现带小三角形的div框(不用图片) 现在看到了很多带小三角形的方框，如微信、Mac版的QQ、QQ空间的时间轴等等，在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着，感觉看着很不错，于是决定亲自动手写一个，我上次用的是偏移背景图片法，那么今天就不用图片，用CSS3实现一下，下面我们来看一下实现代码。 首先我们来看一下CSS3实现三角形原理：其实就是对于transparent的应用 假如html代码是这样的 <div class="arrow-up"> <!--向上的三角--> </div> <div class="arrow-down"> <!--向下的三角--> </div> <div class="arrow-left"> <!--向左的三角--> </div> <div class="arrow-right"> <!--向右的三角--> </div> 下面用CSS3分别实现向上、下、左、右的三角形 /*箭头向上*/ .arrow-up { width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid #fff; }
/*箭头向下*/ .arrow-down { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #0066cc; }
/*箭头向左*/ .arrow-left { width:0; height:0; border-top:30px solid transparent; border-bottom:30px solid transparent; border-right:30px solid yellow; }
/*箭头向右*/ .arrow-right { width:0; height:0; border-top:50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid green; } ok代码整理在一起后，效果大概是这样的： 好了原理我们了解了，那么我们就实战一下吧，来实现带小三角形的div框。 首先，写出html代码： <div class="entry"> <div class="entry-trangle"><!--本Div只来实现三角形，无其他作用--></div> hello，我出生了<br/> hello，我出生了<br/> hello，我出生了<br/> hello，我出生了<br/> </div> 挂载有类"entry-trangle"的div只用来实现小三角形。对这个div用css3的transparent实现三角形，然后绝对定位、设置z-index:-1;、margin-left:-19px;，看下面css代码： <style type="text/css"> *{margin:0;padding:0;} body{ background:#666; font:14px/20px "Microsoft YaHei"; } .entry{ margin:0 auto; margin-top:20px; width:280px; background:#fff; padding:10px;
/*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .entry-trangle{ position:absolute; margin-left:-19px; width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid #fff; z-index:-1; } </style> border-radius:5px;用来实现圆角；绝对定位、z-index:-1;的目的都是使控制小三角形的div在最底层，不影响父级div里面的内容布局。 完整示例代码： =========================================== <html> <head> <title>div显示阴影的文字</title> <style type="text/css"> *{margin:0;padding:0;} body{ background:#666; font:14px/20px "Microsoft YaHei"; } .entry{ margin:0 auto; margin-top:20px; width:280px; background:#fff; padding:10px; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .entry-trangle{ position:absolute; margin-left:-19px; width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid #fff; z-index:-1; } /*箭头向上*/ .arrow-up { width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid #fff; } /*箭头向下*/ .arrow-down { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #0066cc; } /*箭头向左*/ .arrow-left { width:0; height:0; border-top:30px solid transparent; border-bottom:30px solid transparent; border-right:30px solid yellow; }
/*箭头向右*/ .arrow-right { width:0; height:0; border-top:50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid green; } </style> </head> <body> <div class="entry"> <div class="entry-trangle"><!--本Div只来实现三角形，无其他作用--></div> hello，我出生了<br/> hello，我出生了<br/> hello，我出生了<br/> hello，我出生了<br/> </div> <div class="arrow-up"> <!--向上的三角--> </div> <div class="arrow-down"> <!--向下的三角--> </div> <div class="arrow-left"> <!--向左的三角--> </div> <div class="arrow-right"> <!--向右的三角--> </div> </body> </html>
|
||||||
|
||||||
