我正在尝试创建一个箭头标签,使用 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>
我希望后元素与父元素具有相同的高度,我如何通过 css 或 js 做到这一点?
注意:标签内的文本是动态填充的。 [最大文本长度:2 行]
正如我所想,可能无法将其调整为父级的任何高度。目前我正在尝试调整一行和两行文本。
最佳答案
这是一个使用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>
关于html - 根据父级高度动态对齐伪元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48288765/