どうも！LSSです！！
今回は、ふと思いついたCSS小ネタです。
ブログなどの文中でも、さらっと使いやすいんじゃないかな？
サンプル
ただし重要適宜、改行を入れるなどしておかないと上の行と重なってしまいます。
コード
ただし<span style="display: inline-block; transform-origin: 0% 50%; transform: rotate(-25deg); padding: 0 0.5em 0 1em; background-image: conic-gradient(from 40deg at 0% 50%,#ff444480 99deg,#ff444400 100deg); color: #ffffff;">重要</span>適宜、改行を入れるなどしておかないと上の行と重なってしまいます。
上記コードを丸ごとコピーして貼り付けてから、日本語部分を自由に書き換える、または赤太字部分だけをコピーして貼り付けて使う事ができます。
CSSの説明
display: inline-block;
transform-origin: 0% 50%;
transform: rotate(-25deg);
padding: 0 0.5em 0 1em;
background-image: conic-gradient(from 40deg at 0% 50%,#ff444480 99deg,#ff444400 100deg);
color: #ffffff;
↑CSSプロパティごとに改行を入れるとこうなります。
順に説明します。
display: inline-block;
後からtransform:rotateで回転させていますが、transformは対象がblock属性でないと効きません。
文中に挿入でき、なおかつblock要素で…とするために、inline-block属性を指定しています。
transform-origin: 0% 50%;
回転の中心位置を、0%（左端） 50%（上下中央）としています。
の、左の尖った部分ですね。
transform: rotate(-25deg);
-25度、回転させています。
ここの指定は「時計回り」での角度を指定しますが、マイナスを指定しているので「反時計回りに25度」という事になります。
padding: 0 0.5em 0 1em;
枠の中の余白を設定しています。
paddingに４つの値を指定した場合、「上 右 下 左」の順にそれぞれの余白を指定した事になります。
この場合、「上は0、右は0.5em（0.5文字分）、下は0、左は1em（1文字分）」と指定した事になります。
background-image: conic-gradient(from 40deg at 0% 50%,#ff444480 99deg,#ff444400 100deg);
conic-gradientで「左だけ尖った枠」になるように背景を塗っています。
at 0% 50% はtransform-originと同様、「左端、上下中央」がconic（扇形）の中心となる指定です。
from 40deg で「12時方向を0度とした場合の40度時計回りに回転した角度」から「99度、回転した角度」までを、#ff4444（ピンク色）を不透過度80（半透明）で塗り、「100度より後は」不透過度00（完全透明）で塗る、という指定となっています。
color: #ffffff;
最後に、文字色を#ffffff（白色）としています。
サンプル文に書いたように、上の行と重なりますが
一応、色を「半透明」にした事でなんとか見えるかな…？
例えばこうなるので、やはり見づらいかも^^;
あと、上の行との間に改行を余分に入れてスキマを作っておいたとしても、それまでの文字数が長い場合、PCとスマホで改行位置が違ってくるので…というのもありますね。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
