創建未知高度的CSS箭頭

我用http://css-tricks.com/snippets/css/css-triangle/創建帶有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;

它工作時，我知道箭頭的高度。但是現在我想創造一個身高未知的箭。我創建了一個fiddle向你展示我想要做什麼。

正如你所看到的最後一個項目是更高的，箭頭不填充李

有沒有辦法讓這些箭頭填補了李的完整高度，而不使用Javascript的完整高度？

來源

2014-01-31 Rurik Wind

你所需要的是[這]（https://www.google.co.in/search?q=css+responsive+triangle&ie=utf-8&oe=utf- 8＆rls = org.mozilla：en-US：official＆client = firefox -a＆gws_rd = cr＆ei = 6E_rUqe4H4uMrgfUl4DIDA） –

使用下面的代碼

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

來源

2014-01-31 07:58:26 Pramod

有一點需要注意，這涉及到使用外部庫將是有用的 –

如果你不希望加載的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'; 
    } 
}());

來源

2014-01-31 13:42:19

的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

來源

2014-01-31 19:22:39 vals

好的工作！我搞砸了很長一段時間，但放棄了。忘記背景漸變。我也想用'：after'代替div。現在可以嘗試。 :-) –

從Vals的僅CSS示例開始，此示例使用相同的基本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>

來源

2014-02-01 02:37:42

創建未知高度的CSS箭頭

回答

相關問題