向矩形div添加形状

Question

我有一个Rectangle 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

对您来说足够好了吗？我将{rib}的两部分包裹在一个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>

Answer 2

将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;

基本上，将位置设置为绝对应解决此问题。

Answer 3

正如@Paulie_D所说的那样，您将找到大量示例，这些示例在CSS中搜索功能区。不过，要实现您想要的目标，我强烈建议您看一看SVG，它将更具可移植性，并且易于实现。

但是，按照您的入门方式，看一下这个小提琴，我以您的小提琴为基础，并添加了更多代码，这看起来像您想要实现的目标：

http://jsfiddle.net/rdarioduarte/b0sthgL6/

.rect {
  margin: 20px;
  width:200px;
  height: 80px;
  background-color: #5261AC;
  position: relative;
}
.bookmark {
  position: absolute;
  top: -10px;
  right: 10px;
}
.square {
  height: 50px;
  width: 30px;
  background-color: #50C9B5;
}
.triangle-down {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #50C9B5;
}
.bookmark-back {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-bottom: 10px solid #38A1A4;
  position: absolute;
  top: 0;
  left: -6px;
}

<div class="rect">
  <div class="bookmark">
    <div class="square"></div>
	<div class="triangle-down"></div>
	<div class="bookmark-back"></div>
  </div>
</div>