CSSのお勉強第3回目 〜怒りマーク〜

おはようございます、こんにちは、こんばんは。ハルクマです。

今回で3回目。吹き出し系は第1回第2回で作ったので、今回は吹き出しじゃないやつをやっていこうと思います。

話はすこしずれますが、最近久しぶりにぼのぼのを見まして。とても懐かしくなりましたよ。VHSで見てたくらいには昔ですからね、そりゃ懐かしくなります。
それはそれとして、登場キャラのアライグマくん(とその親父)。よく怒ってますよね。
頭に怒りマークつけて蹴り飛ばしてますよね(特にシマリスくん。

この怒りマーク(青筋、怒筋とも)うまくやればcssで作れるんじゃね?って思ってちょっとやってみました。
うまくいけば吹き出しの横の画像とかに重ねて使えるんやないかとも思います。(使う場面があるかどうかはわかりませんが。)

.
.
.

誰がこんなん使うねん!って自分でツッコミを入れてしまった・・・
これ、地味に位置調整が面倒臭かったんですよね、うまく怒りマークに見えなくてちょっと辛かった。なにはともあれ、(張るようなレベルではないけど)htmlぺたり。

<div class="anger"></div>

いや本当に張る必要ないなこれ。
次にCSSぺたり。

.anger,
.anger:before,
.anger:after {
	position: absolute;
	border-right: 10px solid #f00;
	border-bottom: 10px solid #f00;
	border-bottom-right-radius: 80%;
	height: 100px;
	width: 100px;
	box-sizing: border-box;
	content: '';
}

.anger:before {
	top: 120px;
	left: 30px;
	transform: rotate(-120deg);
}
.anger:after {
	top: 30px;
	left: 120px;
	transform: rotate(120deg);
}

まぁ需要はないけど個人的に満足しました。

ただ、個人的にはこのLの形のやつを4つにしたかったのですが。

次回はもっと役に立つようなもの・・・とはいかないと思います。こういう、イラストとかの上から重ねたらそれっぽく見える(今回の場合は怒ってるように見える)感じのものを作りたいと思いますので。
あ、もちろんサイズはちゃんと変えて使わないとデカすぎると思いますので、そのへんはまぁ、各自調整していただけるといいです。

今回はこの辺で。

関連記事

  1. CSSのお勉強第1回目 〜会話吹き出し〜

  2. CSSのお勉強第2回目 〜思考吹き出し〜

プライバシーポリシー