2019/08/06
技術ブログCSSで三角形の装飾(吹き出し)をつける

いつも忘れてしまうので忘備録。
よくある“CSSで三角形”は何故できるのか
という事で、簡単なHTMLを用意しました。
<div class="wrap">
<div class="box">
ここにテキストが入ります
</div>
</div>
このHTMLに一旦こちらのCSSを当ててみます。
/* .wrapは横320pxにしています */
.box{
padding: 10px;
background-color: #ccc;
margin: 0;
position: relative;
}
.box:after{
content: '';
/*absoluteとpositionで外側に配置*/
position: absolute;
bottom: -10px;/*padding分*/
left: 0;
width: 0;
border-style: solid;
border-width: 5px 5px 5px 5px;
border-color: #ffc #fcf #cff #000;
}
すると↓

このように境目が斜めのボーダーが、width 0pxの要素によってくっついてできるものだそうです。
これのいらない部分を透明にして三角形が出来上がりです。
ソースと結果
吹き出し

.box:after{
content: '';
/*absoluteとpositionで外側に配置*/
position: absolute;
bottom: -10px;/*padding分*/
right: 0;
left: 0;/*左右0+marginで中央配置*/
margin: auto;
width: 0px;
border-style: solid;
border-width: 10px 10px 0px 10px;/*上半分になります*/
border-color: #ccc transparent transparent transparent;/* 必要部分以外は透明に */
}
ということで本体部分と色を合わせて完成です。
意外と簡単。
これを応用する事でリボンや矢印も作れます。
作成支援ウェブツールもあるそうです
CSS三角形作成ツールhttp://apps.eky.hk/css-triangle-generator/ja
縦横、斜めも作れるので時間ない時にはツール使った方が楽そう。。
スポンサーリンク
最終更新:2019.08.06
前の記事:« 内向型人間のストレス対策・休日の過ごし方
スポンサーリンク
Instagram更新中
リンク人気記事
2019/02/12
クリスタ(Clip Studio Paint)でブラシの設定と作り方2019/02/27
意外と電話対応はできるのかも?超内向型の自分が接客業をやってみた感想2019/10/15
【ごっつ三国】陳平のキャラデザがどツボだったのでプレイ再開しました
カテゴリー
最新の記事
-
雑記
2025/02/6
雑談 -
内向型がそれなりに生きる
2023/03/25
やっぱり自己診断はむずかしい【mbti/エニアグラム】 -
雑記
2023/01/9
2022年「買ってよかったもの」あれこれ