Треугольник адаптивно?

*{ 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 
 
.triangle{ 
    margin-bottom: 10px; 
    max-width: 250px; 
    padding: 10px 10px 10px 30px; 
    background: #333; 
    color: #ccc; 
    -webkit-clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%); 
clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%); 
-webkit-clip-path: url("#clip-triangle"); 
    clip-path: url("#clip-triangle"); 
}

<div class="triangle">text</div> 
<div class="triangle">text text text text text text text text text text text text</div> 
<div class="triangle">Подскажите пожалуйста, как сделать блок с текстом как на картинке, чтобы если текст расширяет блок триугольник растягивался вместе с блоком.</div> 
 
<svg width="0" height="0"> 
    <defs> 
        <clipPath id="clip-triangle" clipPathUnits="objectBoundingBox"> 
            <polygon points="0.1 0, 1 0, 1 1, 0.1 1, 0 0.5" /> 
        </clipPath> 
    </defs> 
</svg>

.dd { 
  min-height: 20px; 
  position: relative; 
  width: 200px; 
  overflow-y: hidden; 
  margin: 10px ; 
  position: relative; 
  padding: 0 15px; 
  z-index: 9; 
  color: #fff; 
} 
.dd> p { 
  position: relative; 
  z-index: 9; 
} 
.dd:before { 
      position:absolute; 
      height: 0; 
      top: 50%; 
      max-width: 300%; 
      border-right: 500px solid #3aa5de; 
      border-bottom: 1000px solid transparent; 
      content: ""; 
      left: 90%; 
      border-radius:0; 
      margin-left: 10px; 
      transform: scaleX(-1) translateX(100%); 
} 
 
.dd:after { 
      position:absolute; 
      height: 0; 
      top: 50%; 
      transform:scaleY(-1) scaleX(-1) translateY(100%)     translateX(100%); 
      max-width: 300%; 
      border-radius:0; 
      border-right: 500px solid #3aa5de; 
      border-bottom: 1000px solid transparent; 
      content: ""; 
      left: 90%; 
      margin-left: 10px; 
} 
 
.ddd { 
  min-height: 20px; 
  position: relative; 
  width: 200px; 
  overflow: hidden; 
  margin: 10px ; 
  position: relative; 
  padding: 0 15px 0 30px; 
  z-index: 9; 
  color: #fff; 
} 
.ddd> p { 
  position: relative; 
  z-index: 9; 
} 
.ddd:before { 
  position:absolute; 
  height: 0; 
  top: 50%; 
  max-width: 100%; 
  border-left: 500px solid #3aa5de; 
  border-bottom: 1000px solid transparent; 
  content: ""; 
  left: 0%; 
  border-radius:0; 
  //margin-left: 10px; 
  transform: scaleX(-1) translateX(0%); 
} 
 
.ddd:after { 
  position:absolute; 
  height: 0; 
  top: 50%; 
  transform:scaleY(-1) scaleX(-1) translateY(100%)     translateX(0%); 
  max-width: 100%; 
  border-radius:0; 
  border-left: 500px solid #3aa5de; 
  border-bottom: 1000px solid transparent; 
  content: ""; 
  left: 0%; 
  //margin-left: 10px; 
}

<div class="dd"><p>Lorem ipsum dolor sit amet.</p></div> 
<div class="dd"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, id.</p></div> 
<div class="ddd"><p>Lorem ipsum dolor sit amet.</p></div> 
<div class="ddd"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, id.</p></div>