html - 向矩形 div 添加形状

Question

我有一个矩形 div(它是一列的标题)，我想在矩形上方放置一个带状/书签类型的形状。

我目前拥有的 jsfiddle 是 http://jsfiddle.net/Conye9980/zujLrs3d/3/

.triangle-down {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #555;
    align:right;
}
.square {
    height: 50px;
    width: 50px;
    background-color: #555;
    align:right;
}
.rect {
    margin: 20px;
    width:200px;
    height: 80px;
    background-color: yellow;
}

这里是我希望它看起来像的示例:

Answer 1

这对你来说够好吗？我将“功能区”的两部分包裹在一个 div 中，并给它 position: absolute 和 top & right 定位。

   .triangle-down {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid #555;
    align:right;
}
.square {
    height: 50px;
    width: 50px;
    background-color: #555;
    align:right;
}

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

#ribbon {
    position: absolute;
    top: -8px;
    right: 8px;
}

<div class="rect">
  <div id="ribbon">
    <div class="square"></div>
    <div class="triangle-down"></div>
  </div>
</div>