<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" />
  <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>
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;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.