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;

}

?

轉載于:https://www.cnblogs.com/manshanyoucaihua/p/4456072.html

總結

以上是生活随笔為你收集整理的用css实现三角效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。