用css实现三角效果

CSS border原理

一个div或者元素的border并不是我们直观意义上的一条有高度的线，而是一个等高梯形或者三角形（宽高为0时），可以看一下效果：

 

HTML:

<div class="arrow1"></div>

 

CSS:

 

.arrow1{

font-size:0; /*默认有高度会撑开,这里清楚高度*/

width:0;

height:0;

border-width:30px;

border-style:solid;

border-color:red blue green orange;

}

可以看到每一个方向的border都是一个三角形，那么我们只需把对应方向剩余其他方向的border设置为透明或者隐藏掉就可以得到任何方向的一个三角形了。

 

我们以一个下拉图标为示例，得到这样一个图标可以将border的左右和下边框改为透明，css改动如下：

 

.arrow1{

font-size:0; /*默认有高度会撑开,这里清楚高度*/

width:0;

height:0;

border-width:30px 30px 0;

border-style:solid dashed dashed;

/*左右下设为dashed为了兼容ie6*/

border-color:red transparent transparent;

}

 

如果我们想实现下图的效果该怎么办呢？很简单，做两个小三角，一个是背景色，一个是边框色，Java，然后利用定位重叠在一起，记住他们的定位要相差一个像素哦~

 

HTML:

<div class="message-box">

<span>你好啊,欢迎加入我们!</span>

<div class="triangle-border tb-border"></div>

<div class="triangle-border tb-background"></div>

</div>

 

 

CSS:

.message-box {

position:relative;

width:240px;

height:60px;

line-height:60px;

background:#E9FBE4;

box-shadow:1px 2px 3px #E9FBE4;

border:1px solid #C9E9C0;

border-radius:4px;

text-align:center;

color:#0C7823;

}

.triangle-border {

position:absolute;

left:30px;

overflow:hidden;

width:0;

height:0;

border-width:10px;

border-style:solid dashed dashed;

}

.tb-border {

bottom:-20px;

border-color:#C9E9C0 transparent transparent;

}

.tb-background {

bottom:-19px;

border-color:#E9FBE4 transparent transparent;

}