css：clip-path で切り抜いた線に沿って罫線をつけたい

Question

cssで切り抜いた線そって、罫線をつけたいのですがどのようにしたら実現できますか？

clip-path: polygon(100% 0, 100% 38%, 80% 38%, 80% 100%, 0 100%, 0 0); 
-webkit-clip-path: polygon(100% 0, 100% 38%, 80% 38%, 80% 100%, 0 100%, 0 0);

例えば、上記のclip-pathに border　を指定しても、上、左、下にしか borderが反映されません。

border: 2px solid yellow;

よろしくお願いいたします。

Answer 1

SVGも考えてみましたが、中に何か入れることを考えると入れ子にしたほうがいいかもしれません。
子の切り抜きを少し小さくします。

   <div class="wrapper">
     <div class="clip">
     </div>
   </div>

.wrapper,
.clip {
  width: 300px;
  height: 200px;
}

.wrapper {
  background: yellow;
  clip-path: polygon(100% 0, 100% 38%, 80% 38%, 80% 100%, 0 100%, 0 0);
}

.clip {
  background: #fff;
  clip-path: polygon(calc(100% - 2px) 2px, calc(100% - 2px) calc(38% - 2px), calc(80% - 2px) calc(38% - 2px), calc(80% - 2px) calc(100% - 2px), 2px calc(100% - 2px), 2px 2px);
}

Comments

[lime]

すごい！clip-pathで確かにできました！ありがとうございます！！！

Answer 2

clip-pathを用いた解決方法ではないですが、他の方法で表示することができました。画像を重ねる（z-index）で表現したいデザインができました。

Clip-pathを用いた方法ではないですが、自己解決ということで閉めさせていただきたいと思います。