三分钟学会使用HTML制作三角形

首先我们了解在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>

后就可以得到三角形 效果如图  是不是很简单呢