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/06/24
【創作ネタ】話題の診断を使ってキャラクターの性格や特徴を考えてみる -
2020/03/19
イラストにストーリー性をつける!過去のイラスト添削ビフォーアフター -
2020/10/16
イラストの光の色と色収差(RGBずらし)の使い方を考える
カテゴリー
最新の記事
-
内向型がそれなりに生きる
2023/03/25
やっぱり自己診断はむずかしい【mbti/エニアグラム】 -
雑記
2023/01/9
2022年「買ってよかったもの」あれこれ -
イラスト関連
2022/12/29
自創作で「推し香水」を頼んだ話