0
点赞
收藏
分享

微信扫一扫

Vue实现一个长方形少一个三角形的样式(类似两个直角梯形摞在一起的样式)

Gaaidou 2022-03-30 阅读 43

<view class="flag-style"><view class="flag-text">哈哈哈</view></view>

<style lang="less">

.flag-style {

width: 100rpx;

height: 0rpx;

position: relative;

border: 30rpx solid #EBB904;

border-left:30rpx solid transparent;

        .flag-text{

                 position: absolute;

                right: -5rpx;

                 top: -25rpx;

                font-size: 30rpx;

                color: #fff;

        }

}

</style>

注:如果要是需要放在列表中,要将flag-style的样式修改成下面这样。 

.flag-style{

        width: 100rpx;

        height: 0rpx;

        position: absolute;

        right: 0rpx;

        top: 15rpx;

        border: 30rpx solid #EBB904;

        border-left:30rpx solid transparent;

 

举报

相关推荐

0 条评论