2019-06-28

怎么写一个三角形

首先先看一下什么是三角形;

微信图片_20190626070608.jpg

111.jpg

我们在这个酒店.旅游的后面是不是看到一个向下的一个三角形。
然后怎么写这个三角形呢?
我们先写一盒子。

33333.png

 

    

        
首页
        
酒店
        
旅游
        
跟团游
        
自由行
        
机票
        
火车
    
    

给它们后面同一个三角形。

555555.png

}
ul li::after{
    display: inline-block;
    content: "";
    width: 0px;
    height: 0px;
    border: 4px solid transparent;
    border-top-color: red;
}

我们先要给它一个伪元素也就是::after 在后面写
由于ul li是块元素而块元素独占一横的的所以我们要先把他们转换为行内块元素所以才能在他们后面设置三角形 （display: inline-block =转为行内块元素）然后需要在里面设置一个内容三角形才能显示出来
（conten:""=内容的意思）然后三角形怎么设置斜边+高+底边是一个完整的三角我们用代码写的时候（width:0px; height:0px border:4px solid transparent border-top-color: red;=宽+高+边框+实线 +透明色；我们在给上边框一个颜色就可以了）这是一个一下向下的角 那么我们需要一个向上的角怎么弄呢（给它一个下边框的颜色就可以了左右角一样）。
给它们单独一一个怎么加请听下回分解，开玩笑的，

微666.png

    

        
首页
        
酒店
        
旅游
        
跟团游
        
自由行
        
机票
        
火车
    
    

ul :nth-child(2) i{
display: inline-block;
width: 0px;
height: 0px;
border: 4px solid  transparent;
border-bottom-color: blue;
}

我们需要在（li标签的里面加一个内容也就是i标签）然后找到那个（i）标签写代码就行了里面有内容了所以我们就不需要写（centen:""）了