CSS实现梯形的N种方式 |
您所在的位置:网站首页 › 等腰梯形如何画 › CSS实现梯形的N种方式 |
我正在参加「掘金·启航计划」 如何使用css实现梯形,最近研究了好多方式,在此总结下。 方法一 使用border属性 .wrap{ width: 200px; border-bottom: 200px solid red; border-top: 200px solid transparent; border-left: 100px solid transparent; border-right: 100px solid transparent; }效果如下
缺点:图片在梯形中会产生偏移扭曲,达不到我们想要的效果。 方法三 利用数学使用两个四边形拼接,这个方法自己研究下,需要使用父子组件,把父组件按照一定的角度旋转,然后子组件超出部分进行overflow:hidden就可以啦。代码后续补充。 缺点:方法过于复杂,需要计算好角度,确定好父子元素的宽高。 方法四 使用# clip-path 属性 clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 50%);原理:通过甚至四边形的四个顶点的位置来控制四边形边的走向,可以绘制各种各样的梯形 缺点:没有发现,在can i use 中的兼容性达到了98% 最后我使用的使方法四clip-path 属性同时如果你想对梯形元素所在的html转换成图片的话,可以考虑html2canvas 和 dom-to-image . 但是经过我的实践发现html2canva无法对裁剪也就是方法四,方法3适用,另外对于方法2的transform属性也会失效。 所以dom-to-image .是更好的选择 dom-to-image 中topng的原理:兼容性97% // 里面其实就是调用了 draw 方法,promise返回的是一个canvas对象 function toPng(node, options) { return draw(node, options || {}) .then(function (canvas) { return canvas.toDataURL(); }); } function draw(domNode, options) { // 将 dom 节点转为 svg(data: url形式的svg) return toSvg(domNode, options) // util.makeImage 将 canvas 转为 new Image(uri) .then(util.makeImage) .then(util.delay(100)) .then(function (image) { var canvas = newCanvas(domNode); canvas.getContext('2d').drawImage(image, 0, 0); return canvas; }); // 创建一个空的 canvas 节点 function newCanvas(domNode) { var canvas = document.createElement('canvas'); canvas.width = options.width || util.width(domNode); canvas.height = options.height || util.height(domNode); ...... return canvas; } } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |