小三角不設定寬高-- 製作原理
阿新 • • 發佈：2019-02-05
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
/*css註釋給一個盒子加上邊框且有高度和寬度*/
.box_1{
width:50px;
height:50px;
border: 2px solid;
border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}
/*給當邊框增大時*/
.box_2{
width:50px;
height:50px;
border: 20px solid;
border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}
/*給當邊框增大，沒有寬度和高度時*/
.box_3{
width:0px;
height:0px;
border: 20px solid;
border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}
/*給當邊框增大，沒有寬度和高度，且給邊框上邊、右邊顏色為透明屬性(transparent)，下邊、左邊顏色為red、#ADFF2F時*/
.box_4{
width:0px;
height:0px;
border: 20px solid;
border-color: transparent transparent red #ADFF2F;
}
/*給當邊框增大，沒有寬度和高度，且給邊框左邊顏色為透明屬性(transparent)，上邊顏色為blue時*/
.box_5{
width:0px;
height:0px;
border-top: 20px solid blue;
border-left: 20px solid transparent;
/*border-right: 20px solid transparent;*/
margin-top:20px;
}
/*給當邊框增大，沒有寬度和高度，且給邊框上邊、右邊、下邊顏色為透明屬性(transparent)，左邊顏色為#ADFF2F時*/
.right{
width:0px;
height:0px;
border: 20px solid;
border-color: transparent transparent transparent #ADFF2F;
}
/*給當邊框增大，沒有寬度和高度，且給邊框上邊、右邊、左邊顏色為透明屬性(transparent)，下邊顏色為red時*/
.top{
width:0px;
height:0px;
border: 20px solid;
border-color: transparent transparent red transparent;
}
/*給當邊框增大，沒有寬度和高度，且給邊框右邊、下邊、左邊顏色為透明屬性(transparent)，上邊顏色為red時*/
.bottom{
width:0px;
height:0px;
border: 20px solid;
border-color: red transparent transparent transparent;
margin-top:20px;
}
/*給當邊框增大，沒有寬度和高度，且給邊框上邊、下邊、左邊顏色為透明屬性(transparent)，右邊顏色為red時*/
.left{
width:0px;
height:0px;
border: 20px solid;
border-color:transparent red transparent transparent;
}
</style>
</head>
<body>
css註釋給一個盒子加上邊框且有高度和寬度
<div class="box_1"></div>
給當邊框增大時
<div class="box_2"></div>
給當邊框增大，沒有寬度和高度時
<div class="box_3"></div>
給當邊框增大，沒有寬度和高度，且給邊框上邊、右邊顏色為透明屬性(transparent)，下邊、左邊顏色為red、#ADFF2F時
<div class="box_4"></div>
給當邊框增大，沒有寬度和高度，且給邊框左邊顏色為透明屬性(transparent)，上邊顏色為blue時
<div class="box_5"></div>
給當邊框增大，沒有寬度和高度，且給邊框上邊、下邊、左邊顏色為透明屬性(transparent)，右邊顏色為red時
<div class="left"></div>
給當邊框增大，沒有寬度和高度，且給邊框上邊、右邊、下邊顏色為透明屬性(transparent)，左邊顏色為#ADFF2F時
<div class="right"></div>
給當邊框增大，沒有寬度和高度，且給邊框上邊、右邊、左邊顏色為透明屬性(transparent)，下邊顏色為red時
<div class="top"></div>
給當邊框增大，沒有寬度和高度，且給邊框右邊、下邊、左邊顏色為透明屬性(transparent)，上邊顏色為red時
<div class="bottom"></div>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
/*css註釋給一個盒子加上邊框且有高度和寬度*/
.box_1{
width:50px;
height:50px;
border: 2px solid;
border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}
/*給當邊框增大時*/
.box_2{
width:50px;
height:50px;
border: 20px solid;
border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}
/*給當邊框增大，沒有寬度和高度時*/
.box_3{
width:0px;
height:0px;
border: 20px solid;
border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}
/*給當邊框增大，沒有寬度和高度，且給邊框上邊、右邊顏色為透明屬性(transparent)，下邊、左邊顏色為red、#ADFF2F時*/
.box_4{
width:0px;
height:0px;
border: 20px solid;
border-color: transparent transparent red #ADFF2F;
}
/*給當邊框增大，沒有寬度和高度，且給邊框左邊顏色為透明屬性(transparent)，上邊顏色為blue時*/
.box_5{
width:0px;
height:0px;
border-top: 20px solid blue;
border-left: 20px solid transparent;
/*border-right: 20px solid transparent;*/
margin-top:20px;
}
/*給當邊框增大，沒有寬度和高度，且給邊框上邊、右邊、下邊顏色為透明屬性(transparent)，左邊顏色為#ADFF2F時*/
.right{
width:0px;
height:0px;
border: 20px solid;
border-color: transparent transparent transparent #ADFF2F;
}
/*給當邊框增大，沒有寬度和高度，且給邊框上邊、右邊、左邊顏色為透明屬性(transparent)，下邊顏色為red時*/
.top{
width:0px;
height:0px;
border: 20px solid;
border-color: transparent transparent red transparent;
}
/*給當邊框增大，沒有寬度和高度，且給邊框右邊、下邊、左邊顏色為透明屬性(transparent)，上邊顏色為red時*/
.bottom{
width:0px;
height:0px;
border: 20px solid;
border-color: red transparent transparent transparent;
margin-top:20px;
}
/*給當邊框增大，沒有寬度和高度，且給邊框上邊、下邊、左邊顏色為透明屬性(transparent)，右邊顏色為red時*/
.left{
width:0px;
height:0px;
border: 20px solid;
border-color:transparent red transparent transparent;
}
</style>
</head>
<body>
css註釋給一個盒子加上邊框且有高度和寬度
<div class="box_1"></div>
給當邊框增大時
<div class="box_2"></div>
給當邊框增大，沒有寬度和高度時
<div class="box_3"></div>
給當邊框增大，沒有寬度和高度，且給邊框上邊、右邊顏色為透明屬性(transparent)，下邊、左邊顏色為red、#ADFF2F時
<div class="box_4"></div>
給當邊框增大，沒有寬度和高度，且給邊框左邊顏色為透明屬性(transparent)，上邊顏色為blue時
<div class="box_5"></div>
給當邊框增大，沒有寬度和高度，且給邊框上邊、下邊、左邊顏色為透明屬性(transparent)，右邊顏色為red時
<div class="left"></div>
給當邊框增大，沒有寬度和高度，且給邊框上邊、右邊、下邊顏色為透明屬性(transparent)，左邊顏色為#ADFF2F時
<div class="right"></div>
給當邊框增大，沒有寬度和高度，且給邊框上邊、右邊、左邊顏色為透明屬性(transparent)，下邊顏色為red時
<div class="top"></div>
給當邊框增大，沒有寬度和高度，且給邊框右邊、下邊、左邊顏色為透明屬性(transparent)，上邊顏色為red時
<div class="bottom"></div>
</body>
</html>
轉載自：http://www.w3cfuns.com/article-5602544-1-1.html