原文:用CSS的border画三角形

用border画三角形,实际上属于一种奇淫巧技。 利用的是border的一个特性:当一个元素的宽高都为 时,给border设置宽度 至少给 个相邻的边框设置宽度 ,border就会撑开这个元素。 四个边框同时设置宽度时,四个边最后在元素的中心汇成一个点。 因此当我们给一个有宽高的元素设置border时,四个边框的衔接方式是以对角线形式,而不是直角拼接,如图: 所以不设置宽高,给四个边框分别设置不同 ...

2017-07-15 23:48 0 2602 推荐指数:

查看详情

利用cssborder实现三角形思路原理

1、利用Cssborder绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较大的border相交时: 1、只有相邻边才会相交,对边是不可能相交的 2、相交区域(显然是 ...

Thu Nov 24 17:03:00 CST 2016 0 1704
CSS三角形-border

(1)有边框的三角形 我们来写下带边框的三角形。 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。 最容易想到的,是叠加层。思路是将两个三角形叠加在一起,外层三角形稍大 ...

Mon Oct 09 23:06:00 CST 2017 0 3086
CSS三角形-border

(1)有边框的三角形 我们来写下带边框的三角形。 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。 最容易想到的,是叠加层。思路是将两个三角形叠加在一起,外层三角形稍大 ...

Fri Jul 04 17:06:00 CST 2014 12 242650
CSSborder绘制三角形

CSSborder可以画出高质量的三角形。 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px auto; background: #fff ...

Mon Nov 25 19:26:00 CST 2019 0 346
CSS三角形-border

(1)有边框的三角形 我们来写下带边框的三角形。 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。 最容易想到的,是叠加层。思路是将两个三角形叠加 ...

Wed Aug 15 23:35:00 CST 2018 0 1616
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM