我有一个列表,使用:after来显示箭头。它工作正常,但有时会在每个列表中动态添加多于一行的文字。<li>
- 我怎么能让箭头拉伸或只是以某种方式遵循的高度的。<li>
?
你看 在此弹奏. 第一步的文字比较多,所以箭头不再适合高度。
* {
box-sizing: border-box;
}
#step {
padding: 0;
list-style-type: none;
font-family: arial;
font-size: 12px;
clear: both;
line-height: 1em;
margin: 0;
text-align: center;
display:table;
width: 100%;
}
#step li {
float: left;
padding: 10px 30px 10px 40px;
background: #333;
color: #fff;
position: relative;
width: 30%;
margin: 0 10px;
}
#step li:after {
content: '';
border-left: 16px solid #333;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
position: absolute;
top: 0;
left: 100%;
z-index: 20;
}
<ul id="step">
<li>Step 1<br/>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
有没有动态解决这个问题的方法?
先谢谢你了。
拉伸箭头--会显得很糟糕--将箭头居中即可。
添加 - top:50%; 并添加margin-top: - 16px (箭头的一半)
效果很好 :)
#step li:after {
content: '';
border-left: 16px solid #333;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
position: absolute;
top: 50%;
left: 100%;
z-index: 20;
margin-top:-16px;
}
我发现了一个有趣的解决方案 此处 似乎能够处理动态高度--它使用的是线性渐变背景。
/* CSS: */
.box {
width: 400px;
background-color: #307084;
color: #fff;
margin-bottom: 20px;
padding: 10px;
position: relative;
}
.box:before,
.box:after {
width: 20px;
height: 50%;
position: absolute;
left: 100%;
content: "";
}
.box:before {
top: 0px;
background: -webkit-linear-gradient(left bottom, #307084 50%, rgba(0, 0, 0, 0) 50%);
background: linear-gradient(to right top, #307084 50%, rgba(0, 0, 0, 0) 50%);
}
.box:after {
top: 50%;
background: -webkit-linear-gradient(left top, #307084 50%, rgba(0, 0, 0, 0) 50%);
background: linear-gradient(to right bottom, #307084 50%, rgba(0, 0, 0, 0) 50%);
}
<!-- HTML: -->
<div class="box" style="font-size: 20px">
css triangle/arrow grow when its parent div is resized
</div>
<div class="box" style="font-size: 25px;">
css triangle/arrow grow when its parent div is resized
</div>
<div class="box" style="font-size: 40px;">
css triangle/arrow grow when its parent div is resized
</div>
多了一点代码,但是是动态的解决方案。
* {
box-sizing: border-box;
}
#step {
padding: 0;
list-style-type: none;
font-family: arial;
font-size: 12px;
clear: both;
line-height: 1em;
margin: 0;
text-align: center;
display: table;
width: 100%;
}
#step li {
float: left;
padding: 10px 30px 10px 40px;
background: #333;
color: #fff;
position: relative;
width: 30%;
margin: 0 10px;
}
li:before,
li:after {
width: 16px;
height: 50%;
position: absolute;
left: 100%;
content: '';
}
li:before {
top: 0px;
background: linear-gradient(to right top, #333 50%, transparent 50%)
}
li:after {
top: 50%;
background: linear-gradient(to right bottom, #333 50%, transparent 50%)
}
你可以用JS和以下方法来做类似的事情 span
而不是 :after
$(window).on("resize", function () {
$('li').each(function() {
var width = $(this).width();
var height = $(this).outerHeight();
$(this).children('span').css({
'border-top': height/2+'px'+' solid transparent',
'border-left': height+'px'+' solid #333333',
'border-bottom': (height/2+1)+'px'+' solid transparent',
'right': '-'+(height-1)+'px'
});
});
}).resize();
* {
box-sizing: border-box;
}
#step {
padding: 0;
list-style-type: none;
font-family: arial;
font-size: 12px;
clear: both;
line-height: 1em;
margin: 0;
text-align: center;
display:table;
width: 100%;
}
#step li {
float: left;
padding: 10px 30px 10px 40px;
background: #333;
color: #fff;
position: relative;
width: 20%;
margin: 0 30px;
box-sizing: border-box;
}
li span {
position: absolute;
height: 0;
width: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="step">
<li>Step 1<br/>Step 1 <br>Step 1 <span></span></li>
<li>Step 2<br>Step 1 <span></span></li>
<li>Step 3 <span></span></li>
</ul>