Question

我使用http://css-tricks.com/snippets/css/css-triangle/用css创建箭头。

ul li div.arrow{
 position: absolute;
 width: 0;
 height: 0;
 top: 0;
 right: -30px;
 border-left: 15px solid red;
 border-top: 30px solid transparent;
 border-right: 15px solid transparent;
 border-bottom: 30px solid transparent;

当我知道箭头的高度时它起作用。但现在我想创建一个高度未知的箭头。我创建了一个fiddle来向您展示我想要做的事情。

正如您所看到的那样，最后一个项目更高，箭头没有填满li的完整高度

有没有办法让这些箭头在不使用Javascript的情况下填充li的完整高度？

Answer 1

继Vals的CSS-only示例之后，此示例使用相同的基本CSS代码，但它应用于li的伪元素，这意味着不需要额外的div。

CodePen：http://cdpn.io/wlKHj

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

ul{
    list-style-type: none;
    width: 200px;
    margin: 0;
    padding: 0;
}
ul li{
    background-color: red;
    padding: 20px 30px 20px 10px;
    color: #000000;
    position: relative;
    border-top: 1px solid #000000;
}

li:after {
    content: "";
    position: absolute;
    z-index: 10;
    width: 30px;
    bottom: 0px;
    top: 0px;
    right: -30px;
    background-image: linear-gradient(to top right, red 50%, transparent 51%), linear-gradient(to bottom right, red 50%, transparent 51%);
    background-size: 100% 50% ;
    background-position: top left, bottom left;
    background-repeat: no-repeat;
}
</style>
</head>
<body>
<ul>
    <li>
        test 1
    </li>
    <li>
        test 1
    </li>
    <li>
        test 2
    </li>
    <li>
        test 3
    </li>
    <li>
        test 4 test 4 test 4 test 4 test 4 test 4
    </li>
</ul>
</body>
</html>

Answer 2

对于CSS解决方案：

ul li div.arrow{
    position: absolute;
    width: 30px;
    bottom: 0px;
    top: 0px;
    right: -30px;
     background-image: linear-gradient(to top right, red 50%, transparent 51%), linear-gradient(to bottom right, red 50%, transparent 51%);
    background-size: 100% 50% ;
    background-position: top left, bottom left;
    background-repeat: no-repeat;
}

fiddle

Answer 3

使用以下代码

$(function(){
 $("ul li").each(function(){
   var height = $(this).innerHeight()/2;                
   $(this).find(".arrow").css({'border-top':height + 'px solid transparent','border-bottom':height + 'px solid transparent',})
   });
});

Answer 4

如果你不想加载jQuery但想要一个JS解决方案，这似乎也有效：

(function() {
    var listitems = document.querySelectorAll('ul li');
    for (var i=0; i<listitems.length; i++) {
        var height = listitems[i].offsetHeight/2;
        var arrow = listitems[i].querySelector('.arrow');
        arrow.style.borderTop = height + 'px solid transparent';
        arrow.style.borderBottom = height + 'px solid transparent';
    }
}());

创建未知高度的CSS箭头

4 个答案: