CSS實(shí)現(xiàn)梯形的N種方式小結(jié)
我要評論如何使用css實(shí)現(xiàn)梯形，最近研究了好多方式，在此總結(jié)下。
方法一 使用border屬性
<body>
<div class="wrap"></div>
</body>
<style>
.wrap{
width: 200px;
border-bottom: 200px solid red; border-top: 200px solid transparent;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
</style>
效果如下
缺點(diǎn)：只能展示梯形的色塊，如果你想在圖片中展示文字和圖片就不行了；
方法二 使用transform 屬性
.box{
width: 80px;
height: 180px;
background: red;
transform: perspective(0.5em) rotateY(-3deg);
}
但是使用transform會使梯形中的文字和圖片也發(fā)生3d偏移，如果想讓文字不進(jìn)行偏移可以吧transform屬性設(shè)置在盒子的偽元素上面，這樣文字就不會收到偏移的影響。但是針對圖片目前還沒發(fā)現(xiàn)什么有效的解決方案。
缺點(diǎn)：圖片在梯形中會產(chǎn)生偏移扭曲，達(dá)不到我們想要的效果。
方法三 利用數(shù)學(xué)
使用兩個(gè)四邊形拼接，這個(gè)方法自己研究下，需要使用父子組件，把父組件按照一定的角度旋轉(zhuǎn)，然后子組件超出部分進(jìn)行overflow：hidden就可以啦。代碼后續(xù)補(bǔ)充。
缺點(diǎn)：方法過于復(fù)雜，需要計(jì)算好角度，確定好父子元素的寬高。
方法四 使用# clip-path 屬性
clip-path: polygon(100% 0, 100% 50%, 50% 100%, 0 50%);
原理：通過甚至四邊形的四個(gè)頂點(diǎn)的位置來控制四邊形邊的走向，可以繪制各種各樣的梯形
缺點(diǎn)：沒有發(fā)現(xiàn)，在can i use 中的兼容性達(dá)到了98%
最后我使用的使方法四clip-path 屬性
同時(shí)如果你想對梯形元素所在的html轉(zhuǎn)換成圖片的話，可以考慮html2canvas 和 dom-to-image .但是經(jīng)過我的實(shí)踐發(fā)現(xiàn)html2canva無法對裁剪也就是方法四，方法3適用，另外對于方法2的transform屬性也會失效。所以dom-to-image .是更好的選擇
dom-to-image 中topng的原理：兼容性97%
// 里面其實(shí)就是調(diào)用了 draw 方法，promise返回的是一個(gè)canvas對象
function toPng(node, options) {
return draw(node, options || {})
.then(function (canvas) {
return canvas.toDataURL();
});
}
function draw(domNode, options) {
// 將 dom 節(jié)點(diǎn)轉(zhuǎn)為 svg（data: url形式的svg）
return toSvg(domNode, options)
// util.makeImage 將 canvas 轉(zhuǎn)為 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;
});
// 創(chuàng)建一個(gè)空的 canvas 節(jié)點(diǎn)
function newCanvas(domNode) {
var canvas = document.createElement('canvas');
canvas.width = options.width || util.width(domNode);
canvas.height = options.height || util.height(domNode);
......
return canvas;
}
}
到此這篇關(guān)于CSS實(shí)現(xiàn)梯形的N種方式小結(jié)的文章就介紹到這了,更多相關(guān)CSS梯形內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了css實(shí)現(xiàn)多邊形和梯形盒陰影技巧的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-20
CSS實(shí)現(xiàn)梯形標(biāo)簽頁的方法
在web設(shè)計(jì)中，梯形標(biāo)簽頁是很常見的一種形式，但是梯形又是一種很難實(shí)現(xiàn)的樣式，下面小編給大家分享使用CSS實(shí)現(xiàn)梯形標(biāo)簽頁的代碼，需要的朋友參考下吧2017-09-07
