Add a triangular point to a div that changes with the content height with CSS?

#container {
  position: relative;
}
svg {
  position: absolute;
  z-index: -1;
}
#content {
  position: relative;
  word-break: break-all;
  width: 110px;
  padding: 10px;
  box-sizing: border-box;
}

<div id="container">
  <svg id="bg" width="150" height="100%" viewBox="0 0 150 100" preserveAspectRatio="none">
    <path d="M0,0 h110 l40,50 l-40,50 h-110z" fill="#6ED901" />
  </svg>
  <div id="content">This content is dynamic and the height of the triangle will change with the height of the content. The width is fixed. Try adding some more text and see the height change. Also, notice the padding.</div>
</div>

#one {height: 100px;}
#two {height: 200px;}
.corner {
    width: 100px;
    background-color: green;
    margin: 10px;
    position: relative;
}
.corner:after, .corner:before {
    content: "";
    position: absolute;
    left: 100%;
    width: 40px;
    height: 50%;
}
.corner:before {
    top: 0px;
    background: linear-gradient(to top right, green 50%, transparent 51%);
}
.corner:after {
    bottom: 0px;
    background: linear-gradient(to bottom right, green 50%, transparent 51%);
}

<div id="one" class="corner"></div>
<div id="two" class="corner"></div>