div border做三角形原理

.t0{  
    margin:30px;  
    height:200px;  
    width:200px;  
    border-top:solid 100px red;  
    border-left:solid 100px green;  
    border-right:solid 100px orange;  
    border-bottom:solid 100px blue;
}

div的border是有宽度和颜色的，当div的宽度比较大的时候，比如上面代码每个边100像素，颜色又不一样，浏览器怎么渲染颜色呢？经测试发现，宽度较大的border相交时：

1、只有相邻边才会相交，对边是不可能相交的

2、相交区域(显然是矩形)按对角线划分成两个三角形，两个三角形分别渲染成两个边的颜色，颜色不会出现重叠的情况

3、调整四个边的宽度，加上中间区域的宽度，配以不同颜色和透明，各种简单多边形已经不在话下了

时间： 2024-07-29 10:37:15

div border做三角形原理的相关文章

使用CSS border 做三角形 口诀赠上

为了方便用border做三角形,省去那繁琐的思考三角朝向的问题,自己搞了个小口诀,分两篇,一篇是普通的三角,一篇是针对直角三角,口诀如下: 普通篇: 方向朝哪哪边无, 颜色反向来弥补 直角三角篇: 直角三角分两边, 哪侧无值朝哪边, 具体颜色来填充, 要看直角在哪边, 向上直角填上边, 向下直角填下边, top.bottom俩冤家, 从此永远不想见. 针对普通篇的效果如下: 代码如下: .toLeft { width: 0; height: 0; border-width: 30px 50px

用border做三角形

网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margin:30px; height:200px; width:200px; border-top:solid 100px red; border-left:solid 100px green; border-right:solid 100px orange; border-bottom:solid 100

使用border做三角形

网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边都可以单独设置,当四个边相交的时候他们是什么时候改变的? 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style&

border做三角形

切页面~ border: 四个边都可以设置.border-top\border-right\bottom\left. 1. 四个边交汇的地方是怎么处理的呢? 平分~ .t1{ margin:30px; height:100px; width:100px; border-top:solid 30px red; border-left:solid 30px green; border-right:solid 30px orange; border-bottom:solid 30px blue; }

利用border做三角形的效果

利用伪类,和透明可以实现这种效果,大家可以试下 &:before{ position: absolute; left: 30px; top:-6px; content: ""; display: block; width: 0; height:0; border-style: solid; border-width: -12px; border-color: transparent transparent #fff     transparent; }

css做三角形的方法

用csss做三角形使用border属性 一. <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .div1{ border: 200px solid red; border-color: transparent transparent black transparent; width: 0; } </style><

纯css做三角形图标

以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px solid #000; width: 0; } 只要这么简单的三行css就可以实现一个三角形!

CSS用border绘制三角形

使用border绘制三角形的思路,就是border值设置一个很大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

如何利用border书写三角形，建议考虑正方形

网页做三角形图片,你还在拿ps调整吗?out了,老铁,来和我一起脑海畅想一个正方形是由4个等腰直角三角形构成,然后我想保留上边的三角形,那下边.左边.右边的三角形就没了(设置背景色transparent或者与背景相近的颜色),最终结果就是一个保留上边,方向朝下的三角形,需要注意一点的是设置的css样式中width=0,如果不是就不能构成正方形,而是一个梯形:此外还可以通HTML实体里的三角形符号,朝上▲ 10 padding: 0; 11 } 12 /* .box1,.box2,.box3,.b