【CSS】clip-pathで切り抜いた要素に枠線（border）をつける方法

2024年1月19日2024年1月22日

URLをコピーしました！

特殊な形状に枠線をつける時のメモです。

結論

clip-pathを指定した要素に、borderを付けようとしてもうまくいきません↓

上記画像を見て分かる通り切り抜いた部分は、非表示になっています。

そのため、同じclip-pathを指定したサイズ違いの要素を重ねて枠線のように見せる必要があります↓

See the Pen clip-path Octagon button by ユイト (@mikiprogram) on CodePen.

該当コード↓

:root {
  --shape-offset: 5px;
  --shape-upper-left: 0  var(--shape-offset),var(--shape-offset) 0;
  --shape-upper-right:calc(100% - var(--shape-offset)) 0, 100% var(--shape-offset);
  --shape-lower-right:100% calc(100% - var(--shape-offset) ), calc(100% - var(--shape-offset)) 100%;
  --shape-lower-left:var(--shape-offset) 100%,0  calc(100% - var(--shape-offset));
  --octagon:polygon(var(--shape-upper-left), var(--shape-upper-right),var(--shape-lower-right),var(--shape-lower-left));
  
  --base-color: #FFFAF7;
  --main-color: #FF8F43;
  --inset:3px;  
}


.c-button {
  position: relative;
  display: inline-block;
  padding:1rem;
  background-color:currentcolor;
  clip-path:var(--octagon);
}

.c-button::before {
  content: "";
  position: absolute;
  inset:var(--inset);
  background-color: var(--base-color);
  clip-path:var(--octagon);
  z-index: -1;
}

追記

drop-shadowを使って、borderをつけることもできそうです↓

See the Pen Untitled by ユイト (@mikiprogram) on CodePen.

参考↓

clip-path + drop-shadow の表現の限界みを感じる… by @hiro_ghap1さん