Как сделать линию border длинее блока?

div {
  display: block;
  box-sizing: border-box;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 15px;
  border-bottom: 1px solid black;
}
.block {
  border-right: 1px solid black;
  margin-bottom: -10px;
  padding-bottom: 10px;
}
.block:first-child {
  border-left: 1px solid black;
}
.content {
  background-color: lightgreen;
  min-height: 50px;
  position: relative;
}
.content:before, .content:after {
  content: '';
  display: block;
  width: 15px;
  height: 1px;
  position: absolute;
  bottom: 0;
}
.content:before {
  transform: translate(-8px, 0) rotate(45deg);
  left: 0;
  background-color: black;
}
.block:last-child .content:after {
  right: 0;
  transform: translate(8px, 0) rotate(45deg);
  background-color: black;
}

<div class="wrapper">
  <div class="block">
    <div class="content"></div>
  </div>
  <div class="block">
    <div class="content"></div>
  </div>
  <div class="block">
    <div class="content"></div>
  </div>
  <div class="block">
    <div class="content"></div>
  </div>
</div>