初识CSS——CSS三角制作
什么是CSS三角制作？
是指使用CSS代码属性将盒子只显示出一个三角状的标志就是CSS三角制作。
CSS三角制作的要点
- 三角盒子的宽和高皆设置为零；
- 通过设置盒子的边框属性值来决定盒子的大小。
代码演示
先设置一个大盒子divBox1，里面包含有多个小盒子box，对比不同属性值的盒子显示效果。
大盒子的css样式：
.divBox1 {
width: 1200px;
height: 500px;
}
.divBox1 div {
width: 0;
height: 0;
margin: 5px;
float: left;
}小盒子box全部包含在divBox1中。
<div class="divBox1">
</div>- 设置一个border整体属性属性
.box1 {
border: 100px solid purple;
}<div class="box1"></div>- 设置两个边框值
小贴士：边框的上下、左右两个不能组合，只能使用上右、上左、下右、下左四种边框组合方式。
.box2 {
border-top: 200px solid pink;
border-left: 200px solid yellow;
}
.box3 {
border-top: 200px solid pink;
border-right: 200px solid blue;
}
.box4 {
border-bottom: 200px solid red;
border-left: 200px solid yellow;
}
.box5 {
border-bottom: 200px solid red;
border-right: 200px solid blue;
}<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>- 单独设置四个边框值
.box6 {
border-top: 100px solid pink;
border-right: 100px solid blue;
border-bottom: 100px solid red;
border-left: 100px solid yellow;
}<div class="box6"></div>- 设置一个三角显示
小贴士：将盒子的四个边框全部设置为透明状态，单独给一个边框加上颜色就会只显示出一个三角样式了。
.box7 {
border: 100px solid transparent;
border-top-color: pink;
}
.box8 {
border: 100px solid transparent;
border-right-color: blue;
}
.box9 {
border: 100px solid transparent;
border-bottom-color: red;
}
.box10 {
border: 100px solid transparent;
border-left-color: yellow;
}<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>三角制作小案例
首先，需要制作一个大盒子divBox2；
其次，在大盒子上边框有一个三角小盒子，并且它是向上的三角；
最后，制作好向上的三角小盒子后，需要把它定位在大盒子上边框上。
用到的两个属性：
一个是三角制作用到的边框；
另一个就是绝对定位，把三角固定到大盒子的上方。
代码演示
.divBox2 {
width: 200px;
height: 200px;
background-color: black;
position: relative;
}
.divBorderBottom {
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
position: absolute;
top: -20px;
right: 10px;
}<div class="divBox2">
<div class="divBorderBottom"></div>
</div>下篇学习用户界面，拜拜~
