Can this arrow style be accomplished with a variable height?

Question

Here is a demo of the element that I currently have, styled to have an arrow-like ending pointing to the right:

.label {
  position: relative;
  display: inline-block;
  padding: .5rem .75rem;
  line-height: 1rem;
  color: white;
  background-color: darkred;
  box-sizing: border-box;
}
  .label:after {
    content: ' ';
    position: absolute;
    top: 0;
    right: -.5rem;
    border-top: 1rem solid transparent;
    border-left: .5rem solid darkred;
    border-bottom: 1rem solid transparent;
    box-sizing: border-box;
  }

<span class="label">
  BREAKING NEWS
</span>

<br><br>

<span class="label">
  BREAKING <br> 
  NEWS
</span>

But, since border-width doesn't accept percentages, this means I cannot declare the height of that little arrow appendage to be 50% of the height of the element. Instead, I have to declare the borders of that appendage as a specific height (1rem in my case). That means that this kind of solution cannot support text spanning through more than 1 line, because the arrow appendage doesn't fit the height of the element anymore.

So, the first usage of it is the look I want, the second one is a showcase of where it goes wrong.

Could the CSS be written to still have that look, but support a variable height?

another duplicate with more options: https://stackoverflow.com/a/48289185/8620333 — Temani Afif, Jun 11 '20 at 09:11
it's absolutely bonkers how many people have the same problem, and how many solutions were out there, but it was a little tough to find them when it's my first dive into this specific issue, because everyone calls it something else... surely that problem has to have its solution as well.... — Digital Ninja, Jun 11 '20 at 11:44

score 1 · Answer 1 · answered Jun 11 '20 at 07:08

Please run and see the code snippet for the desired result.

.label {
  position: relative;
  display: inline-block;
  padding: .5rem .75rem;
  line-height: 1rem;
  color: white;
  background-color: darkred;
  box-sizing: border-box;
}
/*
.label:after {
  content: ' ';
  position: absolute;
  top: 0;
  right: -.5rem;
  border-top: 1rem solid transparent;
  border-left: .5rem solid darkred;
  border-bottom: 1rem solid transparent;
  box-sizing: border-box;
}
*/
.label:before,
.label:after {
  width: 1rem;
  height: 50%;
  position: absolute;
  left: 100%;
  content: "";
}

.label:before {
  top: 0px;
  background: -webkit-linear-gradient(left bottom, darkred 50%, rgba(0, 0, 0, 0) 50%);
  background: linear-gradient(to right top, darkred 50%, rgba(0, 0, 0, 0) 50%);
}

.label:after {
  top: 50%;
  background: -webkit-linear-gradient(left top, darkred 50%, rgba(0, 0, 0, 0) 50%);
  background: linear-gradient(to right bottom, darkred 50%, rgba(0, 0, 0, 0) 50%);
}

<span class="label">
  BREAKING NEWS
</span>

<br><br>

<span class="label">
  BREAKING <br> 
  NEWS
</span>

<br><br>

<span class="label">
  BREAKING <br> 
  NEWS <br> 
  BREAKING
</span>

Can this arrow style be accomplished with a variable height?

1 Answers1