# CSS background と conic-gradient で bookmark のブックマーク作る

CSS の発展は日進月歩！CSS の conic-gradient 関数使ってブックマーク図形を描きます。

html

<div class="bookmark"></div>

css

.bookmark {
  background: conic-gradient(
      from -45deg,
      currentColor 25%,
      currentColor 50%,
      transparent 50%,
      transparent 75%,
      currentColor 75%
    ) 50% 120% / 30% 80% no-repeat;
}

MDN Web Docs:background (opens new window)
MDN Web Docs:conic-gradient (opens new window)

2021-02-28 4年前

CSS リセットのカスタマイズ

CSSリセット方法とカスタマイズ方法について紹介します。...

Tailwindcss でローディングコンポーネント作成

Tailwind css使って next.jsのグローバルローディングをカスタマイズする話...

Nuxt Fontawesome アイコン使う

Font Awesome 特徴と使い方、Nuxtjs Vuejs で Font Awesome使う方...

シェアボタン SNS ソーシャルリンクの作り方

Facebook TwitterなどのSNSに記事をシェアするためのシェアボタンについて...

CSS ::-webkit-scrollbar スクロールバーをカスタマイズ

webkit系scrollbarカスタマイズ CSS 疑似要素 webkit-scrollbarにつ...

sass-loader エラー

sassエラー対応とsassをオンラインにcssに変換するツール...

HTML 特殊文字エンティティ参照

よく使うhtml特集文字の文字実体参照と10 進数コードエンティティ参照...

html5 新タグ要素と廃止タグ要素

2008年に発表されたHTML5の規則をもとに、新しいタグ要素と機能及び廃止する機能タグなどをまとめ...

safari でボタンタップしたら影が残る怪奇現象

safariでタップしたボタンの影跡が残る現象の解決方法...

css 学習タイピング風アニメーションを css だけでやってみる

Jqueryなし！javascriptなし！CSSだけでタイピング風アニメーションは憧れでやってみま...

google color palette

google color paletteが用意してくれているから、センスなくてもきれいに配色できる...

フルスクリーン背景画像の 100%表示と iPhone 対応方法

フルスクリーン画像表示をやってみました iphone 対応も...

css フルースクリンの背景画像と透けるログイン画面

フルースクリンの背景画像あるいは背景ビデオ、プラス透けるログイン画面を作ってみました...

placeholder text-align プレースホルダーの左寄せ・右寄せ

inputのplaceholder内文字左寄せあるいは右寄せ方法、placeholderにtext-...

margin 上下効かない原因

CSS :before & :after pseudo-elements 疑似要素で画像を重ねる

css画像重ねる効果がほしかったので、cssで画像回転しながらbefore afterで工夫やってみ...

# CSS background と conic-gradient で bookmark のブックマーク作る

関連記事