首先我们了解在HTML中每一个元素都是一个盒子
盒子是由外边距 边框 内边距 内容组成的
而三角形 是由控制盒子边框构成
如下列代码
下面展示一些 内联代码片
。
// A code block
var foo = 'bar';
// An highlighted block
var foo = 'bar';
<style>
.son{
width: 100px;
height: 100px;
border-top: 50px solid red;
border-left: 50px solid yellow;
border-right: 50px solid green;
border-bottom:50px solid black ;
}
</style>
得到下列图形
在这里我们由于边框和内容的挤压 得到了四个梯形,
那我们尝试将内容设置为零。
将代码中width和height 的值设为0;
就可以得到四个三角形, 但是因为我们只要一个三角形,
所以可以尝试将不要的三角形隐藏,
这里就要提到 border中的transparent属性
该属性的用处为将border隐藏
<style>
.son{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom:50px solid black ;
}
</style>
后就可以得到三角形 效果如图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210310125747686.PNG#pic_center) 是不是很简单呢