用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;

}

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。