使用边框法实现css的三角形
先回忆一下border
border简写属性在一个声明设置所有的边框属性。可以按照顺序设置如下属性:
- border-width
- border-style
- border-color
- 每个属性又可以单独设置,还可以针对4边进行分别设置例如:border-top-width,border-left-style等。
border-width
为属性设置边框宽度,只有当边框样式不是none的时候才起作用。如果边框样式是none,边框实际上会被置为0,而且不允许有负值。
它的可能值有:thin medium thick length inherit
border-style
可以参考:https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
具体样式/取值,如下图
border-color
可以设置1-4中颜色属性,可能值有:color_name, hex_number, rgb_number, transparent, inherit
PS:始终把border-style的属性设在border-color之前。因为元素要先获得边框样式才能设置颜色呀!
进入正题
利用border来画三角形
height: 10px; width: 10px; overflow: hidden; /* 这里设置overflow, font-size, line-height */ font-size: 0; /*是因为, 虽然宽高度为 0, 但在 IE 6 下会具有默认的 */ line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */ border-color: #FF9600 #3366ff #12ad2a #f0eb7a; border-style: solid; border-width: 20px;
接着把宽度和高度缩小为0
height: 0; width: 0; overflow: hidden; /* 这里设置overflow, font-size, line-height */ font-size: 0; /*是因为, 虽然宽高度为 0, 但在 IE 6 下会具有默认的 */ line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */ border-color: #FF9600 #3366ff #12ad2a #f0eb7a; border-style: solid; border-width: 20px;
然后我只想要上边橙色的三角形呢?把其他三个三角形的颜色边成透明的就好啦
height: 0; width: 0; border-color: #FF9600 transparent transparent transparent; border-style: solid; border-width: 20px;
我又想要被分成两个颜色的正方形呢?把4边的border俩俩设置成一个颜色吧
height: 0; width: 0; border-color: #FF9600 #FF9600 #3366ff #3366ff; border-style: solid; border-width: 20px;
想要这样的形状的呢?上边的三角形不见了呀,把border-top-width置为0或者把border-top-style设置为none。
height: 0px; width: 0px; border-color: #FF9600 #3366ff #12ad2a #f0eb7a; border-style: solid; border-width: 0 20px 20px 20px;
border-style: none solid solid solid; border-width: 20px;
还想要随心所欲的三角形呢?可以通过设置边框的颜色和大小进行控制
height: 0px; width: 0px; border-color: #FF9600 #FF9600 transparent transparent; border-style: solid; border-width: 20px 0px 20px 45px;
看到三角形就想起了气泡框了
把写好的三角形采用为元素和矩形框链接在一起吧! 使用relative和absolute定位将两者定位
.bubble{ height: 60px; width: 200px; background-color: #FF9600; position: relative; margin: 100px; } .bubble:before{ position: absolute; content: ''; height: 0px; width: 0px; border-color: transparent transparent #FF9600 transparent; border-style: solid; border-width: 20px; top: -40px; }
实心气泡框,嗯哼??我想要空心的。
我的想法是这样的,先实现一个向demo 1 一样的有宽高度的正方形,隐藏两边border,旋转和矩形拼接在一起。同时把背景颜色设置为白色挡住了矩形的蓝色边框。但是仔细看,发现两个元素的接缝处存在一点白色。看到文章的你如果知道怎么解决请给我留言,或者把原因告诉我,感谢感谢
#bubble{ height: 60px; width: 200px; position: relative; margin: 100px; background: white; border: 10px solid deepskyblue; } #bubble:after{ position: absolute; content: ''; height: 30px; width: 30px; border-color: deepskyblue transparent transparent deepskyblue; border-width: 10px; border-style: solid; top:35px; left:100px; transform: rotate(225deg); background-color: white; }
感谢:
http://taobaofed.org/blog/2010/08/05/css-border-hack/
根据自己的理解做个小记录