当前位置: 首页> 汽车> 维修 > 【css】创建一个带有上矩形和下倒三角角标

【css】创建一个带有上矩形和下倒三角角标

时间:2025/7/13 13:13:14来源:https://blog.csdn.net/weixin_40887836/article/details/139778381 浏览次数: 0次

在这里插入图片描述

涉及到的主要CSS属性:

clip-path:使用CSS剪切路径属性创建上矩形和下倒三角形的形状。
transform: scale(0.8);:缩小角标的大小,使其看起来更协调。

完整html及css:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>上面矩形下面倒三角的角标</title><style>.corner-badge {position: relative;display: inline-block;padding: 10px 42px 10px 10px;background: #f4f4f5;}.corner-badge .badge {position: absolute;top: 0;right: 0;background-color: #fe0b36;color: white;font-size: 12px;font-weight: bold;padding: 4px 5px 10px;clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);transform: scale(0.8);}</style></head><body><div class="corner-badge"><span>XXXX</span><div class="badge">最XX</div></div></body>
</html>
关键字:【css】创建一个带有上矩形和下倒三角角标

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: