CSS3三角形绘制原理解析

来源：互联网发布：linux使用搜狗输入法编辑：程序博客网时间：2024/06/05 09:22

今天认真学习了下三角形制作的原理。

截图：

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS3三角形绘制原理</title>
<style type="text/css">
#test1 {
width: 100px;
height: 100px;
border:4px solid blue;
}
#test2 {
width: 100px;
height: 100px;
border:20px solid;
border-color:blue black red yellow;
}
#test3 {
width: 100px;
height: 100px;
border:50px solid;
border-color:blue black red yellow;
}
#test4 {
width: 0px;
height: 0px;
border:50px solid;
border-color:blue black red yellow;
}
#test5 {
width: 0px;
height: 0px;
border-left:50px solid yellow;
border-right:50px solid black;
border-bottom:100px solid red;
}
#test6 {
width: 0px;
height: 0px;
border-left:50px solid transparent; /* transparent 背景透明*/
border-right:50px solid transparent;
border-bottom:100px solid red;
}
#test7 {
width: 0px;
height: 0px;
border-left:50px solid transparent; /* transparent 背景透明*/
border-right:30px solid transparent;
border-bottom:100px solid red;
}
#test8 {
width: 50px;
height: 50px;
border-left:20px solid transparent; /* transparent 背景透明*/
border-right:20px solid transparent;
border-bottom:50px solid red;
}
/*正三角*/
#test_up {
width: 0px;
height: 0px;
border-left:50px solid transparent; /* transparent 背景透明*/
border-right:50px solid transparent;
border-bottom:100px solid red;
}
/*倒三角*/
#test_down {
width: 0px;
height: 0px;
border-left:50px solid transparent; /* transparent 背景透明*/
border-right:50px solid transparent;
border-top:100px solid red;
}
/*左三角*/
#test_left {
width: 0px;
height: 0px;
border-top:50px solid transparent; /* transparent 背景透明*/
border-bottom:50px solid transparent;
border-right:100px solid red;
}
/*右三角*/
#test_right {
width: 0px;
height: 0px;
border-top:50px solid transparent; /* transparent 背景透明*/
border-bottom:50px solid transparent;
border-left:100px solid red;
}

/*圆角生成原理推想*/
.box {
width:auto;
}
.top {
width:300px;
border-bottom:5px solid;
border-top-color:#cc0000;
border-bottom-color:#cc0000;
border-left:5px dotted transparent;
border-right:5px dotted transparent;
}
.center {
width:270px;
padding:10px 20px;
color:white;
font-size:14px;
background:#cc0000;
}
.bot {
width:300px;
border-top:5px solid;
border-top-color:#cc0000;
border-bottom-color:#cccccc;
border-left:5px dotted transparent;
border-right:5px dotted transparent;
}
</style>
</head>

<body>

<div id="test1"></div>
<br>

<div id="test2"></div>
<br>

<div id="test3"></div>
<br>

<div id="test4"></div>
<br>

<div id="test5"></div>
<br>

<div id="test6"></div>
<br>

<div id="test7"></div>
<br>


<div id="test_up"></div>
<br>

<div id="test_down"></div>
<br>

<div id="test_left"></div>
<br>

<div id="test_right"></div>
<br>


<div id="test8"></div>
<br>


<div id="box">
<div class="top"></div>
<div class="center">测试圆角生成原理</div>
<div class="bot"></div>
</div>
<br>

<br>
</body>
</html>

0 0