要素の角を丸くせずに面取りする CSS

雑記

CSSWeb

2023 年 11 月 1 日 (更新: 2023 年 11 月 1 日)

CSS における border-radius は、いわゆる角丸を作るプロパティであって、丸く面取りをすることしかできない。

clip-path プロパティを使うことで、画像のように、要素の角を丸くせず面取りをすることができる。

サンプルページを開く

polygon() 関数で丸くせず面取り

clip-path プロパティは、要素を特定の形状に切り抜くプロパティ。これを使用する。

clip-path に指定できる polygon() 関数は、多角形を描く関数で、3 つ以上の座標の組を指定する (多角形は少なくとも 3 つ角があるため)。これを活用して、角を丸くせず面取りしてみる。CSS はこのようになる。

.box {
 	--radius: 16px;
     clip-path: polygon(var(--radius) 0, calc(100% - var(--radius)) 0, 100% var(--radius), 100% calc(100% - var(--radius)), calc(100% - var(--radius)) 100%, calc(var(--radius)) 100%, 0 calc(100% - var(--radius)), 0 var(--radius));
 }

かなり polygon() 関数の中が長いけど、たいして難しいことはしていない。それぞれの角が、それぞれの座標に対応しているだけ。

おまけ : 四角で切り取られたようにする

さらに角の数を増やして、四角で切り取られたようにしてみる。

.box {
 	--radius: 16px;
 	clip-path: polygon(var(--radius) 0, calc(100% - var(--radius)) 0, calc(100% - var(--radius)) var(--radius), 100% var(--radius), 100% calc(100% - var(--radius)), calc(100% - var(--radius)) calc(100% - var(--radius)), calc(100% - var(--radius)) 100%, calc(var(--radius)) 100%, calc(var(--radius)) calc(100% - var(--radius)), 0 calc(100% - var(--radius)), 0 var(--radius), var(--radius) var(--radius));
 }

もっと長くなったが、これも前と同じ事をしているだけ。

注意点 : 何もかも切り抜いてしまうので注意

clip-path プロパティで切り抜くと例えば border、box-shadow といったプロパティの装飾も切れてしまうので注意。box-shadow については親要素に filter: drop-shadow() を使用することで再現可能。