Scalable way to stack in CSS

Question

I hope everyone will have heard about Sticky Notes. I wanna stack stuff like that. So this is the approach I have till now. I am not sure how to make it scalable for any number of stickies, without using 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>

Problem:

1. I cannot keep on adding .stickynote + .stickynote + .stickynote for all.
2. Is the approach (HTML Structure) correct?
3. It is not a good idea to nest them, as they will not be semantically correct. If that was possible, I would have used nested <ul> and <li>, but I want all those stickies be siblings.
4. Every sticky note has variable heights and may be fixed width. Please don't hardcode the height.

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

Answer 1

EDIT: I did it :). Using transform rotate from the top left on the notes, then reversing the rotation from top left of the parent div. XD

You can change the degrees as long as the parent is negative the same degrees for different offset degrees...

I have eaten my own words saying you can't do it without programming...

---

I don't know how to overline the rest of the answer, this is the old answer.

---

The best I could come up with.

Uses pseudo before and after.

Before creates a "bar" the width of the left offset and set height. So if after has more than 200px of height, it falls back to home left.

After is the part that shows the sticky note.

If anyone can figure out how to move this into the element itself, without being in pseudo using the title attribute, then we win! Otherwise that's the closest you can get without creating extra elements. It's about as semantic as sticky notes get too. Very intriguing question!

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