css 梯形,三角形 实现原理 | 您所在的位置:网站首页 › 尼康d5参数配置详解 › css 梯形,三角形 实现原理 |
首先,我们画一个div,给div加上border,看看盒子模型本来的样子 .border{ width: 300px; height: 300px; border-width: 100px; border-style: solid; border-color: #a5affb #7b70de #8e44ad #663399; } 这是一个彩色边的盒子 border加粗的div.png梯形: .border{ width: 300px; height: 300px; border-width: 100px; border-style: solid; border-color: transparent transparent #8e44ad transparent; } 这是一个彩色边的盒子 css绘制梯形.png由此可见,css绘制的梯形并不是一个容器,只是容器的一条边。css把容器的其余三条边设置为透明的,只显示需要的一条边,就是一个梯形了。 直角梯形 .border{ width: 300px; height: 300px; /*border-width: 100px;*/ border-left-width: 100px; /*有斜边的方向,数值的大小决定斜边的梯度率*/ border-bottom-width: 100px; /*梯形的高*/ border-style: solid; border-color: transparent transparent #8e44ad transparent; /*选择显示哪个方向的梯形*/ } 这是一个彩色边的盒子 直角梯形.png三角形 盒子模型分为两种,一种是border-box,一种是center-box。低版本的ie中是border-box,在新的浏览器中,我们可以把容器的宽高设计为0或者特地设置box-sizing: border-box。 来看看border-box的效果: .border{ width: 300px; height: 300px; box-sizing: border-box; border-width: 300px; border-style: solid; border-color: #a5affb #7b70de #8e44ad #663399; } 这是一个彩色边的盒子由此可见,当设置为border-box时,border的大小包含在容器大小之内,我们可以通过显示某条边来制作三角形 border-box.png .border{ width: 300px; height: 300px; box-sizing: border-box; border-width: 300px; /**/ border-style: solid; border-color: transparent transparent #8e44ad transparent ; /*想要显示哪个方向的三角形*/ } 这是一个彩色边的盒子 border-box 三角形.pngborder-box画直角三角形 .border{ width: 300px; height: 300px; box-sizing: border-box; border-left-width: 300px; /*底边长*/ border-bottom-width: 300px; /*三角形高*/ border-style: solid; border-color: transparent transparent #8e44ad transparent; } 这是一个彩色边的盒子 border-box等腰直角三角形.pngcenter-box: .border{ width: 0px; height: 0px; border-width: 300px; border-style: solid; border-color: #a5affb #7b70de #8e44ad #663399; } 这是一个彩色边的盒子 center-box.png与border-box一样,可以根据控制border的width和方向来画出自己想要的三角形 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |