<div class="wrapper">
  <div class="mainbox">
    <div class="addbox addbox1"></div>
    <div class="divider"></div>
    <div class="addbox addbox2"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam ex laboriosam repellat porro earum nisi consequatur distinctio facere dolor autem?</p>
  </div>
</div>

.wrapper
  display: flex
  justify-content: center
  align-items: center
  margin: 4em auto
  
.mainbox
  width: 50%
  height: 300px
  background: #000
  margin-left: 50px
  color: #fff
  position: relative
  border-radius: 0 5px 5px 0
  
.addbox
  background: red
  width: 50px
  max-height: 42%
  height: 42%
  position: absolute
  z-index: 2
  transform: translateX(-100%)
.addbox1
  top: 0
  border-radius: 5px 0 0 0
  &:before
    position: absolute
    content: ''
    border: 25px solid transparent
    border-top: 25px solid green
    border-right: 25px solid green
    bottom: 0
    transform: translateY(100%)
.addbox2
  bottom: 0
  border-radius: 0 0 0 5px
  &:before
    position: absolute
    content: ''
    border: 25px solid transparent
    border-right: 25px solid green
    border-bottom: 25px solid green
    transform: translateY(-100%)
  
.divider
    position: absolute
    width: 30px
    height: 8px
    background: blue
    left: -21px
    border-radius: 5px
    transform: translateX(-100%) rotate(45deg)
    top: 46%