現状のHPを無料で診断いたします。
お気軽にお問い合わせください。
お役立ち
ニッティ・グリッティの
お役立ち情報
CSSで吹き出しを作る方法をゆっくり解説(その1)
UPDATE :
投稿者 : ニッティ・グリッティ
CSSで吹き出しを作るとき、疑似要素の幅とかボーダーを調整して小さな△を作って吹き出しを作るやり方しか知らなかったのですが、下記サイトにclip-pathで制作する方法が紹介されていました。
https://css-tricks.com/perfect-tooltips-with-css-clipping-and-masking/
このサイトによると、ふきだし全部に背景を設定しているようなとき、とくにグラデーションなんかつかっているときに、この方法が役に立つようです！
それでは、ゆっくりと読み解いていきましょう
完成形はこちらです
https://codepen.io/sungura/pen/dyWNZwZ
さて、今回のポイントになるclip-pathの基本形をまとめておきます
clip-pathは図形を切り抜くCSSのプロパティです
- 四角に切り抜く場合 {clip-path : inset(外周の辺と本体との距離) [round 半径];}
- ※角丸にしたい場合は、[round 半径]を指定する
- 円形に切り抜く場合 {clip-path : circle(円の半径 [at 中心]);}
- ※縦横真ん中を中心にしたい場合は、at 50% 50%とする
- 楕円形にしたい場合 {clip-path : eclipse(楕円の半径) [at 中心];}
- ※楕円の半径は、横、縦の順にふたつ設定する。 たとえば150px 50pxとすると、横に長い楕円になる
そして、
- 多角形に切り抜く場合 {clip-path : polygon(各点の座標(x, y)をカンマ区切りで記載;}
- ※左上を0% 0%とする座標を指定する
文章ではわかったような、わからないような感じですが、便利なジェネレータがあります！
こちら(https://bennettfeely.com/clippy/)で動かしてみるとわかりやすいです。
それでは上記の内容をふまえつつ、今回のclip-pathのコードを見てみましょう
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(100% – 10px),
calc(50% + 10px) calc(100% – 10px),
50% 100%,
calc(50% – 10px) calc(100% – 10px),
0% calc(100% – 10px)
);
やはりコードだけではよくわからないですよね。
そんな場合は、手で書いてみるといいです。
それぞれの点を座標にとっていくとこんな感じになります。
これをつないでいくと、吹き出しの形になりますね！
この方法だと背景画像がグラデーションになっている場合でも大丈夫です。
CSSで吹き出しを作る方法、今回はclip-pathを使う方法でした～
この記事を書いた人Who wrote this blog
ニッティ・グリッティ
ようやく水に親しむ季節になってきましたね。浮足立つ気持ちを押さえながらも、隙あらばどこかの海へ旅に出たいと考えています。
プロフィールランキング
BLOG
お役立ち情報
-
雑に選んでいませんか？フォントでデザインに表情をつけよう！
2024.12.03
CATEGORY
お役立ち情報 -
【初心者さん必見！】使えると超おしゃれ！「ブレンドツール」とは！~イラレの便利機能紹介Part6~
2024.12.02
CATEGORY
お役立ち情報 -
テンプレートで簡単!?もう悩まないプレゼン資料作成!
2024.11.28
CATEGORY
お役立ち情報 -
ホームページ集客のコツとは？コンサルティング会社が紹介！
2023.08.21
CATEGORY
お役立ち情報 -
IT導入補助金のご案内
2023.08.07
CATEGORY
お役立ち情報 -
【3分でわかる】Threads（スレッズ）とは？登録方法やTwitterとの違いをご紹介
2023.07.07
CATEGORY
お役立ち情報
