用CSS3实现带小三角形的div框(不用图片)_html/css

用CSS3实现带小三角形的div框(不用图片)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:31:40

Original

1516 people have browsed it

现在看到了很多带小三角形的方框，如微信、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>

Copy after login

下面用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;}

Copy after login

ok代码整理在一起后，效果大概是这样的：

好了原理我们了解了，那么我们就实战一下吧，来实现带小三角形的div框。

首先，写出html代码：

<div class="entry">    <div class="entry-trangle"><!--本Div只来实现三角形，无其他作用--></div>    hello，我出生了<br/>    hello，我出生了<br/>    hello，我出生了<br/>    hello，我出生了<br/></div>

Copy after login

挂载有类"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>

Copy after login

border-radius:5px;用来实现圆角；绝对定位、z-index:-1;的目的都是使控制小三角形的div在最底层，不影响父级div里面的内容布局。

好了，我们已经完工了。