html - 在 CSS 中堆叠的可扩展方式

Question

我希望每个人都听说过便利贴。我想堆叠这样的东西。所以这是我到目前为止的方法。我不确定如何在不使用 JavaScript 的情况下使其可扩展到任意数量的即时贴。

* {
  font-family: 'Segoe UI';
}
.stickynote {
  position: absolute;
  background: #fc0;
  border: 1px solid #f90;
  border-radius: 5px;
  padding: 10px;
  width: 75px;
  top: 10px;
  left: 10px;
}
.stickynote + .stickynote {
  top: 20px;
  left: 20px;
}

.stickynote + .stickynote + .stickynote {
  top: 30px;
  left: 30px;
}

<div class="stickynote"> Sticky!!! </div>
<div class="stickynote"> Sticky!!! </div>
<div class="stickynote"> Sticky!!! </div>

问题:

1. 我无法继续添加 .stickynote + .stickynote + .stickynote对所有人。
2. 方法(HTML 结构)是否正确？
3. 将它们嵌套 不是一个好主意，因为它们在语义上是不正确的。如果可能的话，我会使用嵌套 <ul>和 <li> ，但我希望所有这些便签纸都是 sibling 。
4. 每个便签的高度都是可变的，可能是固定的width .请不要硬编码 height .

Note: I am ready to provide as much as information. I don't see why this question gets close votes!

Answer 1

编辑:I did it :).使用变换从音符的左上角旋转，然后从父 div 的左上角反转旋转。 XD

您可以更改度数，只要父项对于不同的偏移度数是负的相同度数...

我自己说过没有编程就做不到...

---

我不知道如何强调答案的其余部分，这是旧答案。

---

The best I could come up with.

前后使用伪。

在创建一个“bar”之前，左边偏移的宽度和设置的高度。因此，如果 after 的高度超过 200 像素，它会回到左侧。

之后是显示便利贴的部分。

如果有人能想出如何将它移动到元素本身，而不是使用 title 属性伪造，那么我们就赢了!否则，这是您在不创建额外元素的情况下可以获得的最接近的值。它与便签一样具有语义。非常有趣的问题!

HTML

<div class="stack">
  <div class="note" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></div>
  <div class="note" title="Sed ac tellus at quam convallis feugiat. Ut vehicula leo non tellus convallis, id faucibus quam varius. Sed feugiat nulla in elit dignissim condimentum."></div>
  <div class="note" title=""></div>
  <div class="note" title="Cras quis volutpat sapien. Mauris volutpat ultrices lacus eu accumsan. Cras tempor sapien maximus quam finibus, ullamcorper imperdiet mauris aliquam."></div>
</div>

CSS

.note:before {
  content: '';
  width: 20px;
  height: 200px;
  float: left;
}
.note:after {
  content: attr(title);
  width: 200px;
  min-height: 200px;
  padding: 10px;
  background: khaki;
  box-shadow: 1px 2px 7px rgba(0,0,0,.3);
  border: khaki 1px outset;
  display: inline-block;
  margin: 10px 0 -190px 0;
}