我正在尝试使用 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行]
正如我所想的那样,可能无法调整它的任何父母高度。目前,我正在尝试它调整一行和两行文本。
这是一个使用 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>
好吧,您可以选择保持箭头的大小相同,并通过将顶部更改为top: 50%;
并添加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>
使用 svg 路径作为background-image
,您可以将 background-size
属性拉伸到 100% 100%
。只要确保 svg 有preserveAspectRatio="none"
.one-line:after {
background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 25.1 50" style="enable-background:new 0 0 25.1 50;" xml:space="preserve"><polygon class="st0" points="0,50 0,50 25,25 0,0" fill="#ff0000"/></svg>');
position: absolute;
top: 0;
left:100%;
height: 100%;
width: 25px;
background-size: 100% 100%;
background-repeat:no-repeat;
display: block;
content:'';
}
https://jsfiddle.net/7jm54u6L/