CSS-边距2-实现一个三角形

1、利用CSS实现一个三角形

1.1实现思路

（1）将元素的宽度和高度设置为0，同时设置4个边的颜色和宽度，出现4个三角形。
（2）将其中3个边设置为透明。

1.2源代码

    
    
    


    
1、将元素的宽度和高度设置为0 ，设置4个边的颜色和宽度。出现4个三角形。
    

    
2、设置3个变透明
    

    

    

    

1.3运行效果

CSS三角形

2、CSS 导航下边三角形

2.1实现效果

效果

2.2实现思路

（1）使用一个div中，放置3个div内容、红色三角形、蓝色三角形。
（2）设置div的布局为相对定位，设置红色和蓝色三角形的盒子为绝对定位。
（3）设置红色三角形盒子top:50%，y轴偏移到中间，但是盒子并不是在中间，通过margin-top:-20px. 向上偏移三角形的一半，这样红色三角形正好到中间。
（4）设置蓝色三角形盒子left:50%，x轴偏移到中间，但是盒子并不是在中间，通过margin-left:-20px. 向走偏移三角形的一半，这样蓝色三角形正好到中间。

2.3源代码