uniapp 用css画五边形(app 小程序)，长方形中间斜线分割成两部分

news2024/11/17 7:32:23

效果图

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%);
           }

长方形

.box {
               display: flex;
               position: relative;
               font-size: 22rpx;
               font-family: PingFang SC;
               font-weight: 500;
               width: 216rpx;

               .left {
                   width: 116rpx;
                   height: 42rpx;
                   border: 2rpx solid #FD7216;
                   border-bottom-left-radius: 8rpx;
                   border-top-left-radius: 8rpx;
                   color: #ED6719;
                   text-align: center;
                   line-height: 42rpx;
                   background-color: #ffffff;
                   -webkit-clip-path: polygon(0 0, 100% 0, 100rpx 100%, 0% 100%);
                   clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
               }

               .right {
                   width: 116rpx;
                   height: 42rpx;
                   line-height: 42rpx;
                   text-align: center;
                   border-bottom-right-radius: 8rpx;
                   color: #FFFFFF;
                   border-top-right-radius: 8rpx;
                   border: 2rpx solid #FD7216;
                   background-color: #FD7215;
                   clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
                   position: absolute;
                   left: 94rpx;
               }
           }

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

参考文章

CSS clip-path 属性 | 菜鸟教程

辅助工具 CSS3剪贴路径（Clip-path）在线生成器工具 - 代码工具 - 脚本之家在线工具

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/548724.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！