<div class="arrow a2">
  <p>This is some text to wrap to test This is some text to wrap to test This is some text to wrap to test This is some text to wrap to test This is some text to wrap to test This is some text to wrap to test This is some text to wrap to test This is some text to wrap to test </p>
  <p>This is some text to wrap to test This is some text to wrap to test This is some text to wrap to test This is some text to wrap to test This is some text to wrap to test This is some text to wrap to test This is some text to wrap to test This is some text to wrap to test </p>
</div>
<div class="arrow">
  <p>This is some text to wrap to test</p>
  <p>This is some text to wrap to test </p>
  <p>This is some text to wrap to test</p>
  <p>This is some text to wrap to test</p>
  <p>This is some text to wrap to test</p>
</div>
<div class="arrow">
  <p>This is some text to wrap to test</p>
</div>
.arrow {
  margin: 1rem;
  background: blue;
  color: white;
  display: table;
  padding: 1rem 5rem 1rem 1rem;
  clip-path: polygon(
    0 0,
    calc(100% - 4rem) 0%,
    100.1% 50%,
    calc(100% - 4rem) 100.1%,
    0 100%
  );
}
.a2 {
  width: 50%;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.