<div:class="{isFirst: index === 0,tab_item: index !== 0,}":style="{width: item?.label?.length > 4 ? '206px' : '137px',}"><div>{{ item.label }}</div></div>

isFirst是直角梯形 tab_item是平行四邊形?

直角梯形

????????

.isFirstcursor pointerwidth: 107px;height: 0px;border: 0px solid transparentborder-bottom: 42px solid $background;border-right: 42px solid transparentdisplay: flexjustify-content: centerdivposition: relativetop: vh(12)left: vw(5)

?平行四邊形

.tab_itemcursor: pointer;width: 137px;height: 100%;background-color: $background;position: relative;transform: skew(46deg);display: flexjustify-content: centeralign-items: centerleft: vw(-15)margin-right: vw(5)divtransform: skew(-46deg);

總結

以上是生活随笔為你收集整理的css 绘制直角梯形 和 平行四边形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。