css border實現的三角形圖案，cssborder

css border實現的三角形圖案，cssborder

css中border的作用相信大家都知道，它的作用是用於設定邊框，但是對於css border如何?三角形圖案，估計有很多朋友多不知道如何?。本文章向大家介紹css border如何?絢麗多彩的三角形圖案。

 

利用css控制border的邊框屬性, 可以畫出三角形，下面一步一步示範給大家看：

先看下面代碼代碼如下：

<style>div{    width:200px;    height:200px;    border-top:50px solid yellow;    border-right:50px solid red;    border-bottom:50px solid purple;    border-left:50px solid blue;}</style><div></div>

效果如：

如果我們將idth和height設為0，又會是什麼樣的呢：

<style>div{    width:0px;    height:0px;    border-top:50px solid yellow;    border-right:50px solid red;    border-bottom:50px solid purple;    border-left:50px solid blue;}</style><div></div>

如下：

可以看出，我們已經有了四個的三角形，如果只需要一個三角形，該怎麼實現呢？很簡單，只需要將其他三個邊框的顏色設為透明transparent即可。

代碼如下：

<style>div{    width:0px;    height:0px;    border-top:50px solid transparent;    border-right:50px solid transparent;    border-bottom:50px solid transparent;    border-left:50px solid blue;}</style><div></div>

：

好了，效果達成了，大家現在應該知道怎麼實現了吧，其實很容易。