Html 向矩形div添加形状

我有一个矩形div（它是一个列的标题），我想把一个功能区/书签类型的形状放在矩形上，但也放在它上面

到目前为止，我的JSFIDLE是

。三角形向下{
宽度：0；
身高：0；
左边框：25px实心透明；
右边框：25px实心透明；
边框顶部：25px实心#555；
对齐：右；
}
.广场{
高度：50px；
宽度：50px；
背景色：#555；
对齐：右；
}
.直肠{
利润率：20px；
宽度：200px；
高度：80px；
背景颜色：黄色；
}

我希望它看起来像什么的示例如下：

---

这对你来说够好吗？我将“ribbon”的两个部分包装在一个

div

中，并给了它

位置：绝对位置和
顶部和右侧位置


。三角形向下{
宽度：0；
身高：0；
左边框：25px实心透明；
右边框：25px实心透明；
边框顶部：25px实心#555；
对齐：右；
}
.广场{
高度：50px；
宽度：50px；
背景色：#555；
对齐：右；
}
.直肠{
利润率：20px；
宽度：200px；
高度：80px；
背景颜色：黄色；
位置：相对位置；
}
#丝带{
位置：绝对位置；
顶部：-8px；
右：8px；
}
将css更改为以下内容：

    .triangle-down {
    position: absolute;
    top: 60px;
    width: 0px;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #555;
    align:right;
    }

    .square {
    top: 10px;
    height: 50px;
    width: 50px;
    background-color: #555;
    position: absolute;
    align:right;
    }

    .rect {
    margin: 20px;
    width:200px;
    height: 80px;
    background-color: yellow;

基本上，将位置设置为绝对应该可以解决这个问题。
正如@Paulie\u D所说，您将在CSS中找到大量搜索ribbon的示例。然而，为了实现您想要的，我强烈建议您看看SVG，它将更加容易实现

但是，按照您开始的方式，看看这把小提琴，我以您的小提琴为基础，添加了一些代码，它看起来像您想要实现的：



.rect{
利润率：20px；
宽度：200px；
高度：80px；
背景色：#5261AC；
位置：相对位置；
}
.书签{
位置：绝对位置；
顶部：-10px；
右：10px；
}
.广场{
高度：50px；
宽度：30px；
背景色：#50C9B5；
}
.三角下降{
宽度：0；
身高：0；
左边框：15px实心透明；
右边框：15px实心透明；
边框顶部：10px实心#50C9B5；
}
.回书签{
宽度：0；
身高：0；
左边框：6px实心透明；
边框底部：10px实心#38A1A4；
位置：绝对位置；
排名：0；
左-6px；
}

如果您搜索CSS Ribbon，您将在此处找到许多示例和其他资源。您可能想要尝试的东西不需要太多CSS，而是制作一个SVG[viewbox][1]，它是您创建的预定义空间，动态灵活，完成后可以设置为库仑标题的背景图像。[1] ：谢谢，太好了。非常感谢。谢谢，伙计，非常感谢。很好，很有趣。谢谢