比较常用的三角及border用法

来源：互联网发布：小满软件垃圾编辑：程序博客网时间：2024/05/29 09:36

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: 20pxsolid red;
}

3、左三角

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

#left {
width: 0;
height: 0;
border-top: 10pxsolid transparent;
border-right: 20px solid red;
border-bottom: 10px solid transparent;
}

4、右三角

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

#right {
width: 0;
height: 0;
border-top: 10pxsolid transparent;
border-left: 20px solid red;
border-bottom: 10px solid transparent;
} 

5、左上角

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

#topleft {
width: 0;
height: 0;
border-top: 20pxsolid red;
border-right: 20px solid transparent;
} 

5、右上角

<div id="topright"></div>
#topright {
width: 0;
height: 0;
border-top: 20pxsolid red;
border-left: 20px solid transparent; 
}

6、左下角

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

#bottomleft {
width: 0;
height: 0;
border-bottom: 20px solid red;
border-right: 20px solid transparent;
}

7、右下角

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

#bottomright {
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
}

8、四边颜色不同的边框

<div id="border"></div>
#border{
width:50px;
height:50px;
border: 2pxsolid; 
border-color: red green blueblack; 
}

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

<div id="one"></div>
#one{
width:50px;
height:50px;
border: 20pxsolid; 
border-color: red green blueblack; 
}

9、不描述了

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

#three{
width:0px;
height:0px;
border: 20pxsolid; 
border-color: red green blueblack; 
}

10、

<div id="four"></div>
#four{
width: 0;
height:0;
border-top: 40pxsolid red; 
border-right: 40px solid green; 
border-left: 40px solid black; 
}

11、

<div id="five"></div>
#five{
width: 0;
height:0;
border-top: 40pxsolid red; 
border-right: 40px solid green; 
}

12、

<div id="six"></div>
#six{
width: 40px;
height:40px;
border-top: 40pxsolid red; 
border-right: 40px solid black; 
}

阅读全文

0 0