#大有学问# #头条创作挑战赛#

什么是CSS三角制作？

是指使用CSS代码属性将盒子只显示出一个三角状的标志就是CSS三角制作。

CSS三角制作的要点

1. 三角盒子的宽和高皆设置为零；
2. 通过设置盒子的边框属性值来决定盒子的大小。

代码演示

先设置一个大盒子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>

下篇学习用户界面，拜拜~