<div id="container">
  <svg id="bg" height="100%" width="150" viewBox="0 0 150 100" preserveAspectRatio="none" shape-rendering="geometricPrecision">
    <path d="M0,0 h110 l40,50 l-40,50 h-110z" />
  </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.</div>
</div>

body, html {
  margin: 0;
  height: 100%;
	background: DarkKhaki;
}
#container {
	position: relative;
  width: 150px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
}
svg {
	position: absolute;
	z-index: -1;
}
svg path {
  fill: LightYellow;
}
#content {
	position: relative;
	word-break: break-all;
  width: 110px;
  padding: 10px;
  box-sizing: border-box;
  -moz-text-overflow: ellipsis;
}