这里我们将width 和 height设置为0 然后分别将四个边框设置为不同 的颜色 可明显看出4个角的位置被相邻边框平均分配了、 3 而这个特性,正好可以帮助我们实现画三角形,我们可以将下边框直接设置为0,这样会直接将下面的长方形去掉 4 然后将右边和左边的边框设置为透明,这样只会消失两个小三角,然后我们向下的三角就...
此时边框成为三角形! 二.利用边框特性画三角形 只需要让其他三个角的颜色和背景色相同,留下一个三角即可 div{width:0px;height:0px;border:50px solid red;border-color:white white red white;} 边框3.png 三.利用边框特性画圆 border-radious给div元素添加圆角的边框 div{width:100px;height:100px;border:...
思路:两个三角形叠加,暂且把有边框的三角形定义为A,大三角形定义为B,小三角形定义为C,B的背景颜色==A的边框颜色,B的背景颜色=A的背景颜色。可以利用伪元素,也可以利用绝对定位的方式。 css样式: *{padding:0;margin:0; }html{font-size:62.5%; }.box{height:10rem;width:15rem;border-radius:0.5rem;...
#triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; } 画出边框的: 最容易想到的,是叠加层。思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色;内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。
如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框...
边框2.png 此时边框成为三角形! 二.利用边框特性画三角形 只需要让其他三个角的颜色和背景色相同,留下一个三角即可 div{ width: 0px; height: 0px; border:50px solid red; border-color: white white red white; } 边框3.png 三.利用边框特性画圆 border-radious 给div元素添加圆角的边框 div{ width:...
用css3画有边框的三角形 思路:两个三角形叠加,暂且把有边框的三角形定义为A,大三角形定义为B,小三角形定义为C,B的背景颜色==A的边框颜色,B的背景 颜色=A的背景颜色。可以利用伪元素,也可以利用绝对定位的方式。 css样式: *{ padding:0; margin:0; } html{ font-size: 62.5%; } .box{ height:1...