# 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
  • css
レンタルサーバー エックスサーバー レンタルサーバー エックスサーバー DMM fx DMM fx 開発/運用エンジニア募集プログラム 開発/運用エンジニア募集プログラム 外為ジャパンFX 新規口座開設促進 外為ジャパンFX 新規口座開設促進 eBay公式ショッピングサイト Qoo10 eBay公式ショッピングサイト Qoo10 Amazon.co.jpのカテゴリごとのページ

関連記事

google color palette
背景画像フルースクリーン 100%表示 iphone 対応
css フルースクリンの背景画像と透けるログイン画面
HTML 特殊文字エンティティ参照
margin 上下効かない原因
placeholder text-align プレースホルダーの左寄せ・右寄せ
safari でボタンタップしたら影が残る怪奇現象
sass-loader エラー
css 学習 タイピング風アニメーションを css だけでやってみる
CSS :before & :after pseudo-elements 疑似要素で画像を重ねる
html5 新タグ要素と廃止タグ要素