【CSS】ラインの下に三角をつくる

ラインの下に三角を作りたいのですよー

おー、擬似要素で作ると簡単ですよー

つくる

See the Pen ラインの下に三角をつくる by 125naroom (@125naroom) on CodePen.

さいごに

できましたー

よかったですー

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

2023

【CSS】『shape-outside』でテキストの回り込みを円形にしてみる

文章の回り込みって丸くできないですかー？あー、円形に回り込みですねー、できますよーテキストの回り込みを円形にしてみる floatが必須です。shape-outsideは、円形の『circle()』の他に楕円の『ell

...

CSS

デザインのメモ

2022

【CSS】『mix-blend-mode』の実装サンプル、画像の白背景を消す（透過させる）など

画像の白背景をCSSで透過できたりしますかー？できますよー『mix-blend-mode』を使うとこんな感じになります（実装サンプル）白背景を透過させるなら「multiply」がいい感じです。画像と背景の色バランス

...

【CSS】『mix-blend-mode』の実装サンプル、画像の白背景を消す（透過させる）など

CSS

デザインのメモ

2019

【CSS】プラスとマイナスをつくる

プラスってCSSで作れますかー？作れますよープラス See the Pen CSSだけで、プラスをつくる by 125naroom (@125naroom) on CodePen. HTML CSS マイナス See

...

CSS

デザインのメモ

Googleさんの
おすすめ

2025

人気記事

2024.3.1

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

ん、ハンバーガー？三本線がハンバーガーに見えるからってことらしいですよクリックエフェクトサンプル集いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。

...

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

CSS

デザインのメモ

2024.7.11

【jQuery】スライダープラグイン「slick」実装サンプル集

slick（スリック）の使い方をまとめてくださいーわかりましたーよく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by

...

jQuery slick

デザインのメモ

2024.2.2

【jQuery】アコーディオン実装サンプル10選

jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。いろいろありますねーいろいろあるのでまとめましたーアコーディオン、シンプル版 See the Pen アコーディオン、シ

...

jQuery

デザインのメモ

Googleさんの
おすすめ

2025

SPONSORED LINK

おすすめの広告です

google

デザインの記事

2025.01.07
映画『海の沈黙』公式サイト
国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
デザインのこと – Web design gallery

2025.01.10
ドラム式洗濯乾燥機くん、故障する。
ドラム式くんがうちにやってきて5年。どうやら壊れてしまったようです。無印良品窓の…
無印良品の家と暮らす

2024.07.11
【jQuery】スライダープラグイン「slick」実装サンプル集
slick（スリック）の使い方をまとめてくださいーわかりましたーよく見かけるスライダ…
125naroom / デザインするところ（会社）です。