使用css画三角形,首先想到的思路是:利用border边框样式来实现,这是由于border的边框是由四个三角形组成的。 首先生成一个带边框宽高为0的div: <style> .dom{ width: 0px; height: 0px; border ...
用border画三角形,实际上属于一种奇淫巧技。 利用的是border的一个特性:当一个元素的宽高都为 时,给border设置宽度 至少给 个相邻的边框设置宽度 ,border就会撑开这个元素。 四个边框同时设置宽度时,四个边最后在元素的中心汇成一个点。 因此当我们给一个有宽高的元素设置border时,四个边框的衔接方式是以对角线形式,而不是直角拼接,如图: 所以不设置宽高,给四个边框分别设置不同 ...
2017-07-15 23:48 0 2602 推荐指数:
使用css画三角形,首先想到的思路是:利用border边框样式来实现,这是由于border的边框是由四个三角形组成的。 首先生成一个带边框宽高为0的div: <style> .dom{ width: 0px; height: 0px; border ...
1、利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较大的border相交时: 1、只有相邻边才会相交,对边是不可能相交的 2、相交区域(显然是 ...
带边框的三角形 气泡三角形 ...
(1)有边框的三角形 我们来写下带边框的三角形。 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。 最容易想到的,是叠加层。思路是将两个三角形叠加在一起,外层三角形稍大 ...
(1)有边框的三角形 我们来写下带边框的三角形。 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。 最容易想到的,是叠加层。思路是将两个三角形叠加在一起,外层三角形稍大 ...
用CSS的border可以画出高质量的三角形。 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px auto; background: #fff ...
(1)有边框的三角形 我们来写下带边框的三角形。 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。 最容易想到的,是叠加层。思路是将两个三角形叠加 ...
实例一: 实现的效果如下图: 实例二: 实现的效果如下图: ...