吹き出しみたいな三角のついた見出しデザインをCSSで実装してみた

sponsored link

fukidashi

こんなの作ってみました。
ページのちょっとしたアクセントに・・・。

サンプルページ

HTML

今回はdlタグ使ってみました。

<dl class="fukidashi">
  <dt>ここに何か</dt>
  <dd>そしてその後にここに何かが入るのです!</dd>
</dl>

CSS

.fukidashi {
	margin:20px 0;
}
.fukidashi dt {
	position: relative;
	color: #fff;
	font-weight:bold;
	float:left;
	clear:both;
	padding:10px 15px;
	background-color: #DE3737;
}
.fukidashi dd {
	padding:10px 30px;
	display:inline-block;
	background-color:#F8F8F8;
	margin:0;
}
.fukidashi dt::after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-width: 10px;
	margin-top: -10px;
    border-left-color: #DE3737;
}
sponsored link

3 thoughts to “吹き出しみたいな三角のついた見出しデザインをCSSで実装してみた”

  1. はじめまして!いい見出しないかなぁ~とググってたらたどり着きました。
    かわいい雰囲気の見出しありがとうございます。
    超初心者なのでCSSカスタマイズはしばらく(とうぶん)無理でして本当に助かります。
    ありがとうございます!

    一点質問がありまして・・・
    右側のグレー部分の文字を増やすと
    スマホ(iphone5)で表示するとずれてしまうのは画面が小さいからですよね・・・
    iphone6ならちゃんと表示されるのではないかと・・・
    何か解決方法があれば教えていただきたくコメントしました。

    1. 見つけてくださりありがとうございます!
      文字サイズを増やすと、どうしてもブラウザによって表示が違うと思います。
      2行のを参考にして、3行、4行のものを作ってみるといいかもしれません!

      1. すっかり変身遅くなりましてもうしわけありません。3行、4行、修行なるものをやってみたいと思います。コメントありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA