これは便利! HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
Post on:2024年5月8日
HTMLはdiv
要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。
さまざまな形状はdiv
だけでなく、img
で画像にも実装することもできます。
![HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape](http://coliss.com/wp-content/uploads-202402/2024042701@2x.png)
The Ultimate CSS Shapes Collection
The Ultimate CSS Shapes Collectionを作成したのは以前紹介したCSS Loaders(紹介記事)やCSS Ribbon Shapes(紹介記事)と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回はさまざまな形状を実装するシェイプです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024042702-01@2x.png)
The Ultimate CSS Shapes Collection
まずは、CSSの実装方法から。
各ページで「Copy the CSS」をクリックすると、CSSがコピーできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024042702-02@2x.png)
HTMLはすべて共通で、div
要素一つです。
1 |
<div class="heart"></div> |
もしくは、img
要素の画像をその形状にすることもできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024042702-03@2x.png)
1 |
<img class="heart" src="" alt=""> |
あとは、さきほどのCSSをペーストするだけ。
※コピーしたCSSにはコメントでHTMLも含まれていました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* 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; } } |
CSSで実装されたシェイプは現在160種類あり、ハートやスターといったよく見かける形状をはじめ、ジグザグ、ウェーブ、キューブ、フィルム、シグナル、スパイラル、パックマンやバットマンなどさまざまなデザインが用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024042702-04@2x.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024042702-05@2x.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024042702-06@2x.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024042702-07@2x.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202402/2024042702-08@2x.png)
sponsors