Как обвести блок по срезанному углу?

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
</div>

.container {
  width: 500px;
  height: 500px;
  position: relative;
}
.a {
  display: none;
  width: 500px;
  height: 500px;
  background-color: black;
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10%);
  position: absolute;
  top: 0;
  left: 0;
}
.b {
  width: 494px;
  height: 494px;
  background-color: yellow;
  position: absolute;
  top: 3px;
  left: 3px;
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10%);
}
.container:hover .a {
  display: block;
}