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