Html 创建高度未知的CSS箭头_Html_Css

Html 创建高度未知的CSS箭头

html css

Html 创建高度未知的CSS箭头,html,css,Html,Css,我曾经用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; 当我知道箭头

我曾经用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;

当我知道箭头的高度时，它就起作用了。但现在我想创建一个高度未知的箭头。我创建了一个脚本来告诉你我想做什么

如您所见，最后一项较高，箭头未填充li的整个高度

有没有一种方法可以让这些箭头在不使用Javascript的情况下填充li的整个高度？

使用以下代码

$(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',})
   });
});

如果您不想加载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';
    }
}());

（函数（）{
var listitems=document.queryselectoral（'ul-li'）；
对于（var i=0；i对于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;
}

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

保险商实验室{
列表样式类型：无；
宽度：200px；
保证金：0；
填充：0；
}
ulli{
背景色：红色；
填充：20px 30px 20px 10px；
颜色：#000000；
位置：相对位置；
边框顶部：1px实心#000000；
}
李：之后{
内容：“；
位置：绝对位置；
z指数：10；
宽度：30px；
底部：0px；
顶部：0px；
右：-30px；
背景图像：线性渐变（右上角，红色50%，透明51%），线性渐变（右下角，红色50%，透明51%）；
背景大小：100%50%；
背景位置：左上、左下；
背景重复：无重复；
}


测试1


测试1


测试2


测试3


测试4测试4测试4测试4测试4测试4测试4


您需要注意的是，这涉及到使用外部库，这将是一个有用的好工作！我在这方面做了很长时间，但放弃了。忘记了背景渐变。我还想使用：after而不是div。现在可以尝试一下。：-）
<!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>