Can't get an embedded note, background-color and transform: rotate to work right.

Observed on post #8134957
I really want the background-color to be white, it's pink in these examples to make it more clear what is happening.

<div class="note-box-attributes" style="transform: rotate(-21deg); background-color: pink; font-family: narrow; font-size: 170%; white-space: nowrap">Mommy is Pekora's Mommy!!</div>

Note box is rotated 21 degrees CCW and has a pink background. Text is rotated 42 degrees, and has its own pink background.

<div class="note-box-attributes" style="transform: rotate(-21deg); background-color: pink"><div style="transform: rotate(21deg); font-family: narrow; font-size: 170%; white-space: nowrap">Mommy is Pekora's Mommy!!</div></div>

Note box and text are both rotated 21 degrees CCW. An additional empty box with a pink background is rotated 42 degrees.

<div class="note-box-attributes" style="transform: rotate(-21deg)"><div style="transform: rotate(21deg); font-family: narrow; font-size: 170%; white-space: nowrap">Mommy is Pekora's Mommy!!</div></div>

Note box and text are rotated 21 degrees CCW and note box background is default yellow. The additional empty box is not present.

<div class="note-box-attributes" style="transform: rotate(-21deg)"><div style="transform: rotate(21deg); background-color: pink; font-family: narrow; font-size: 170%; white-space: nowrap">Mommy is Pekora's Mommy!!</div></div>

Note box and text are rotated 21 degrees CCW. Pink background does not fill the entire note box. Similar to behavior of a non-embedded note.

It seems like an extra box is being created, and this box is always being rotated twice. How do I fix this?

Move the note content out of the note-box-attributes div. Danbooru takes styles from that element, but it doesn't actually become the note box. Close it immediately and put the rest of the content separately. The content will inherit rotation and anything else from the styles you specify, even though the markup doesn't look like it, because the site will apply the note-box-attributes styles to the parent of the note. You're seeing rotation twice because the note-box-attributes styles are copied to the parent of the note box, and then your actual div applies them again on top of that.

Try for example this:

<div class="note-box-attributes" style="transform: rotate(-21deg); background-color: pink"></div><div style="font-family: narrow; font-size: 170%; white-space: nowrap">Mommy is Pekora's Mommy!!</div>

Thank you, that did the trick.