これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape

Post on:2024年5月8日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。

さまざまな形状はdivだけでなく、imgで画像にも実装することもできます。

HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape

The Ultimate CSS Shapes Collectionを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回はさまざまな形状を実装するシェイプです。

The Ultimate CSS Shapes Collection

まずは、CSSの実装方法から。
各ページで「Copy the CSS」をクリックすると、CSSがコピーできます。

CSS Shape: Heart

HTMLはすべて共通で、div要素一つです。

<div class="heart"></div>

1	<div class="heart"></div>

もしくは、img要素の画像をその形状にすることもできます。

<img class="heart" src="" alt="">

1	<img class="heart" src="" alt="">

あとは、さきほどのCSSをペーストするだけ。
※コピーしたCSSにはコメントでHTMLも含まれていました。

/* HTML: <div class="heart"></div> */
.heart {
  height: 250px; /* adjust to control the size */
  aspect-ratio: 1;
  --_m: radial-gradient(#000 69%,#0000 70%) 84.5%/50%;
  -webkit-mask-box-image: var(--_m);
             mask-border: var(--_m);
  clip-path: polygon(-41% 0,50% 91%, 141% 0);
  background: #cc333f;
}
/* fallback until better support for mask-border */
@supports not (-webkit-mask-box-image: var(--_m)) { 
  .heart {
    mask:
     radial-gradient(at 70% 31%,#000 29%,#0000 30%),
     radial-gradient(at 30% 31%,#000 29%,#0000 30%),
     linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
  }
}