MENU

Web制作のあれこれの情報を発信提供いたします

clip-pathで画像をクリッピングする方法

July 5, 2024

URLをコピーしました！

<img decoding="async" src="http://chii-blog.ichigo20.com/wp-content/uploads/2024/06/ち-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px">

画像を色々な形にくり抜きたいなあ〜？

<img decoding="async" src="http://chii-blog.ichigo20.com/wp-content/uploads/2024/06/logo-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px">

あるよ！では見てみよう♪

目次

クリップパスの種類

clip-path は CSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。

inset() : 四角形
circle() : 円形
polygon() : 多角形
ellipse() : 楕円形

CODE

See the Pen clip-path 画像 by ちいうさ (@zqnixpal-the-looper) on CodePen.

クリップパスジェネレーター

あわせて読みたい

Clippy — CSS clip-path maker

<img decoding="async" src="http://chii-blog.ichigo20.com/wp-content/uploads/2024/06/ち-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px">

へ〜〜色々な形にくり抜けるんだね♪

<img decoding="async" src="http://chii-blog.ichigo20.com/wp-content/uploads/2024/06/logo-150x150.png" alt="" class="c-balloon__iconImg" width="80px" height="80px">

これからも色々教えるよ！

よかったら仲良くしてくださいね！

URLをコピーしました！

document.addEventListener('DOMContentLoaded', function() { const copyButtons = document.querySelectorAll('.copy-button'); copyButtons.forEach(button => { button.addEventListener('click', function() { const codeContainer = this.previousElementSibling; const code = codeContainer.textContent; navigator.clipboard.writeText(code).then(() => { this.textContent = 'Copied!'; setTimeout(() => { this.textContent = 'Copy'; }, 2000); }).catch(err => { console.error('Failed to copy text: ', err); }); }); }); });