CSS / 比较常用的三角及border用法

1、上三角 

<div id="up"></div>

#up {

width: 0;

height: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 20px solid red;

}

2、下三角 

<div id="down"></div>

#down {

width: 0;

height: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-top: 20px solid red;

}

3、左三角

<div id="left"></div>

#left {

width: 0;

height: 0;

border-top: 10px solid transparent;

border-right: 20px solid red;

border-bottom: 10px solid transparent;

}

4、右三角

<div id="right"></div>

#right {

width: 0;

height: 0;

border-top: 10px solid transparent;

border-left: 20px solid red;

border-bottom: 10px solid transparent;

}

5、左上角

<div id="topleft"></div>

#topleft {

width: 0;

height: 0;

border-top: 20px solid red;

border-right: 20px solid transparent;

}

6、右上角
 

<div id="topright"></div>

#topright {

width: 0;

height: 0;

border-top: 20px solid red;

border-left: 20px solid transparent;

}

7、左下角

<div id="bottomleft"></div>

#bottomleft {

width: 0;

height: 0;

border-bottom: 20px solid red;

border-right: 20px solid transparent;

}

8、右下角

<div id="bottomright"></div>

#bottomright {

width: 0;

height: 0;

border-bottom: 20px solid red;

border-left: 20px solid transparent;

}

9、四边颜色不同的边框

<div id="border"></div>

#border{

width:50px;

height:50px;

border: 2px solid;

border-color: red green blueblack;

}

10、边框宽度比较大的时候的四边颜色不同的边框

<div id="one"></div>

#one{

width:50px;

height:50px;

border: 20px solid;

border-color: red green blueblack;

}

11、不描述了

<div id="three"></div>

#three{

width:0px;

height:0px;

border: 20px solid;

border-color: red green blueblack;

}

12、

<div id="four"></div>

#four{

width: 0;

height:0;

border-top: 40px solid red;

border-right: 40px solid green;

border-left: 40px solid black;

}

 

13、

<div id="five"></div>

#five{

width: 0;

height:0;

border-top: 40px solid red;

border-right: 40px solid green;

}

14、

 

<div id="six"></div>

#six{

width: 40px;

height:40px;

border-top: 40px solid red;

border-right: 40px solid black;

}