您现在的位置是:首页 >技术教程 >uniapp 用css画五边形(app 小程序)网站首页技术教程

uniapp 用css画五边形(app 小程序)

周zerlinda 2024-06-17 10:32:20
简介uniapp 用css画五边形(app 小程序)

效果图

 css

.scoreLabel{
                background: $yxs-theme-color;
                width: 64rpx;
                height: 69rpx;
                line-height: 32rpx;
                font-size: 28rpx;
                font-family: DINPro;
                font-weight: 500;
                color: #FFFFFF;
                margin-bottom: 22rpx;
                clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
            }

 clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。可以指定一些特定形状。

参考文章

CSS clip-path 属性 | 菜鸟教程

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。