JSFiddle - React, Tailwind, and code Playground

HTML

<p class="triangle-border left">But it could be any element you want.</p>

CSS

.triangle-border.left {
  margin-left: 30px;
}

.triangle-border {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  border: 5px solid #5a8f00;
  color: #333;
  background: #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.triangle-border.left:before {
  top: 10px;
  bottom: auto;
  left: -30px;
  border-width: 15px 30px 15px 0;
  border-color: transparent #5a8f00;
}
.triangle-border:before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 40px;
  border-width: 20px 20px 0;
  border-style: solid;
  border-color: #5a8f00 transparent;
  display: block;
  width: 0;
}