How to style div to make it look like my attached image

Question

Please help me style my div to make it like my attached image. I've tried but can't figure out

Here is my code:

.home {
  height: 100%;
  text-align: center;
  width: 20rem;
  border: 4px solid black;
  background-color: #e6e6e6;
  padding: 1rem;
  position: relative;
}

.home:after {
  content: "";
  position: absolute;
  bottom: -2rem;
  left: 40%;
  border-top: 17px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

<div class="home">Blogs</div>