根据父高度动态对齐伪元素

Question

我正在尝试使用 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>

我希望 after 元素与父元素具有相同的高度，我该如何通过 css 或 js 来做到这一点？

注意：标签内的文本是动态填充的。[文本最大长度：2行]

正如我所想，可能无法调整父母的任何高度。目前我正在尝试调整一行和两行文本。

Answer 1

这是一个使用的解决方案clip-path。这个想法是在多边形中使用 % 值来仅显示所需的形状，并且无论高度是多少，它都将始终有效：

.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>

这是另一个依赖伪元素和一些倾斜变换来创建箭头的解决方案。您会注意到这个将保持箭头的比例。

.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>

另一种只有一个伪元素 和 的方法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>

最后没有任何伪元素，只有主元素的背景：

.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>