0

先ほど質問した際 に回答頂いたものを用いて課題に取り組んでいましたが、塗りつぶした部分を斜めにしたいのですが、斜めにすることができません。

書き方はこちらの参考にしましたので間違いないと思いますが、よろしくお願い致します。

<p>アリスは川辺でおねえさんの<span class="marker">よこ</span>にすわって、なんにもすることがないのでとても<span class="marker">退屈（たいくつ）</span>しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。</p>

.marker {
  user-select: none; background: #000;
  transform: rotate(5deg);
}
cubick
  • 20,987
  • 5
  • 25
  • 64
user37046
  • 287
  • 4
  • 13

1 Answers1

2

transformが適用できる対象に制限があります。

https://drafts.csswg.org/css-transforms/#transformable-element

transformable element

A transformable element is an element in one of these categories:

  • all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],

  • all SVG paint server elements, the <clipPath> element and SVG renderable elements with the exception of any descendant element of text content elements [SVG2].

<span>はデフォルトでは non-replaced inline box に該当するので、transformは動きません。

.markerのルールセットに「display: inline-block;」などを足して inline box でなくなれば対象になります。

int32_t
  • 8,418
  • 1
  • 11
  • 14
  • ありがとうございます。inline-blockを足すとspan全部が一度に改行するようになったのですがこれを文が改行するときのようにすることはできますか？ – user37046 Dec 12 '19 at 16:35
  • 1
    できません。1つの要素なのに改行が入って複数の領域として描画されうるのが non-replaced inline box であり、その性質とtransformの相性がものすごく悪いのです。 – int32_t Dec 13 '19 at 03:03
  • わかりました。ありがとうございました。 – user37046 Dec 13 '19 at 03:52