css 绘制直角梯形和平行四边形-Toy模板网

这篇具有很好参考价值的文章主要介绍了css 绘制直角梯形和平行四边形。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

css 绘制直角梯形和平行四边形,css,css3,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是平行四边形

直角梯形

文章来源地址https://www.toymoban.com/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 绘制直角梯形和平行四边形的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！