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 属性 | 菜鸟教程

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