61389


[先ほど質問した際](https://ja.stackoverflow.com/q/61378/19110)
に回答頂いたものを用いて課題に取り組んでいましたが、塗りつぶした部分を斜めにしたいのですが、斜めにすることができません。

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

[code]

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

[code]

    .marker {
      user-select: none; background: #000;
      transform: rotate(5deg);
    }
    
[/code]


CC BY-SA 4.0
2019-12-12T12:28:27.410
61387
2019-12-12T16:46:00.963
2019-12-12T16:46:00.963
3060
37046
question
css
transformで斜めにならない


`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 でなくなれば対象になります。


CC BY-SA 4.0
2019-12-12T15:28:46.580
61389
2019-12-12T15:28:46.580
3475
61387
answer