玩转CSS盒子之 三角形盒子
【例1】：设置各边框的颜色
#mydiv{ width: 40px; height: 40px; background-color: red; // 盒子背景颜色 border: 10px solid; // 盒子边框宽度、线型 border-top-color: blue; // 盒子顶部边框颜色 border-bottom-color: green; // 盒子底部边框颜色 border-left-color: aqua; // 盒子左侧边框颜色 border-right-color: blueviolet; // 盒子右侧边框颜色 }
【例2】：在例1的基础上增加margin属性：
#mydiv{ ... margin: 30px; }
【例3】：在例1的基础上增加padding属性：
#mydiv{ ... padding: 20px; }
【例4】：只给边框，边距和盒子内容的宽高都设置为0：
#mydiv{ width: 0; height: 0; margin: 0; padding: 0; border:40px solid; border-top-color: blue; border-bottom-color: green; border-left-color: aqua; border-right-color: blueviolet; }
【例5】：保留一个三角形（以最上面的三角形为例），其余设置为透明。
#mydiv{ width: 0; height: 0; background-color: red; // 背景色 border:40px solid; border-top-color: blue; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; }
【例6】：取消背景色：制作一个CSS三角形
#mydiv{ width: 0; height: 0; border:40px solid; border-top-color: blue; border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; }
也可以使用如下写法：
#mydiv{ width: 0; height: 0; border:40px solid transparent; border-top-color: blue; }
如果你理解了的话还可以用两个三角组合成一个直角三角形：
#a{ width: 0; height: 0; border:40px solid transparent; border-top-color: blue; border-left-color: blue; }
