Dynamically aligning pseudo element according to parent height

I am trying to create an arrow label, using css :after

.one-line {
  font-size: 2em;
  width: 150px;
  min-height: 50px;
  height: auto;
  background: blue;
  margin: 5px;
  position: relative;
  color: #fff;
}

.one-line:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid red;
}

<div class="one-line">text<br>text<br></div>

I want the after element to take the same height which is of parent, how can I do this by either css or js?

Note: The text inside the label is dynamically populating. [Max length of text: 2 lines]

It might not be possible, as I am thinking, to adjust it any height of parent. Currently I am trying it to adjust for both one and two lines of text.

Here is a solution using clip-path. The idea is to use % values in the polygon to only show the needed shape and it will always work whatever the height is:

.one-line {
  font-size: 2em;
  width: 150px;
  min-height: 50px;
  height: auto;
  background: blue;
  margin: 5px;
  position: relative;
  color: #fff;
}

.one-line:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25px;
  right: -25px;
  background: red;
  -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}

<div class="one-line">text<br>text<br></div>
<div class="one-line">text<br>text<br>text<br></div>

<div class="one-line">text</div>

<div class="one-line">text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>

Here is another solution that rely on both pseudo elements and some skew transformation to create the arrow. You will notice that this one will keep ratio of the arrow.

.one-line {
  font-size: 2em;
  width: 150px;
  min-height: 50px;
  height: auto;
  background: blue;
  margin: 5px;
  position: relative;
  color: #fff;
}

.one-line:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  height: 50%;
  width: 50%;
  right: -25px;
  background: red;
  transform: skewX(20deg) translateX(-33%);
  transform-origin: top;
  z-index: -1;
}

.one-line:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  height: 50%;
  width: 50%;
  right: -25px;
  background: red;
  transform: skewX(-20deg) translateX(-33%);
  transform-origin: bottom;
  z-index: -1;
}

<div class="one-line">text<br>text<br></div>
<div class="one-line">text<br>text<br>text<br></div>

<div class="one-line">text</div>

<div class="one-line">text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>

Another way with only one pseudo element and linear-gradient.

.one-line {
  font-size: 2em;
  width: 150px;
  min-height: 50px;
  height: auto;
  background: blue;
  margin: 5px;
  position: relative;
  color: #fff;
}

.one-line:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  height: 100%;
  width: 50px;
  right: -50px;
  background: 
   linear-gradient(to bottom left, transparent 49.4%, red 50%) top, 
   linear-gradient(to top left,    transparent 49.4%, red 50%) bottom;
  background-size:100% 50.2%;
  background-repeat:no-repeat;
}

<div class="one-line">text<br>text<br></div>
<div class="one-line">text<br>text<br>text<br></div>

<div class="one-line">text</div>

<div class="one-line">text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>

And finally without any pseudo element and only background on the main element:

.one-line {
  font-size: 2em;
  width: 200px;
  padding-left:50px;
  min-height: 50px;
  height: auto;
  background: 
   linear-gradient(blue,blue) left/calc(100% - 50px) 100%,
   linear-gradient(to bottom left, transparent 49.4%, red 50%) top right/50px 50.2%, 
   linear-gradient(to top left, transparent 49.4%, red 50%) bottom right/50px 50.2%;
  background-repeat:no-repeat;
  margin: 5px;
  position: relative;
  color: #fff;
}

<div class="one-line">text<br>text<br></div>
<div class="one-line">text<br>text<br>text<br></div>

<div class="one-line">text</div>

<div class="one-line">text<br>text<br>text<br>text<br>text<br>text<br>text<br></div>

Well, you could opt to keep the arrow the same size and align it in the middle by changing top to top: 50%; and adding transform: translateY(-50%);

.one-line{
  
  width: 150px;
  min-height: 50px;
  height: auto;
  background: blue;
  margin: 5px;
  position: relative;
  color: #fff;
  
}

.one-line:after{
  content: '';
  display: block;
  position: absolute;
  left: 100%;
  width: 0; 
  height: 0; 
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid red;
  
  top: 50%;
  transform: translateY(-50%);
}

<div class="one-line">text<br>text<br>text<br>text</div>

<div class="one-line">text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text</div>

Dynamically aligning pseudo element according to parent height

Related

Recent Posts