文章來源：http://www.zghlxwxcb.cn/news/detail-561216.html
<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是平行四邊形?
直角梯形
????????文章來源地址http://www.zghlxwxcb.cn/news/detail-561216.html
.isFirst
cursor pointer
width: 107px;
height: 0px;
border: 0px solid transparent
border-bottom: 42px solid $background;
border-right: 42px solid transparent
display: flex
justify-content: center
div
position: relative
top: vh(12)
left: vw(5)?平行四邊形
.tab_item
cursor: pointer;
width: 137px;
height: 100%;
background-color: $background;
position: relative;
transform: skew(46deg);
display: flex
justify-content: center
align-items: center
left: vw(-15)
margin-right: vw(5)
div
transform: skew(-46deg);到了這里，關于css 繪制直角梯形 和 平行四邊形的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
