現状のHPを無料で診断いたします。
お気軽にお問い合わせください。
お役立ち
ニッティ・グリッティの
お役立ち情報
CSSで吹き出しを作る方法 その3
UPDATE :
投稿者 : ニッティ・グリッティ
それでは、あらためてSVGとクリッピングマスクを使用した切り抜きについて確認してみましょう。
まずはこの部分で、SVGで抜き出すパスの形を指定しています。
そして、clippathのidは、tooltipを設定しています。
<svg>
<clipPath id=”tooltip” clipPathUnits=”objectBoundingBox”>
<path d=”M1,0H0v0.9302195h0.4483962C0.477628,0.9342086,0.5003342,0.9639273,0.5003369,1h0.0000107 c0-0.0360727,0.022709-0.0657914,0.0519407-0.0697805H1V0z”/>
</clipPath>
</svg>
その後、下記HTMLにCSSを当てていきます
<div class=”tooltip”>
<img src=”https://placehold.jp/150×150.png” />
</div>
css
.tooltip {
clip-path: url(#tooltip);
font-size: 0;
width: 100%;
max-width: 350px;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
.tooltipに、ID tooltipを当てています。こうすることで、上で定義したクリップパスを画像に適用しています
こうすることで、吹き出しの形状に抜き出すことができました！
https://codepen.io/sungura/pen/PomdNer
ランキング
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
お役立ち情報
