本文主要是介绍【css】创建一个带有上矩形和下倒三角角标，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
涉及到的主要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】创建一个带有上矩形和下倒三角角标的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
