表格行後的css三角形

我想在html表格的當前選定行之後添加一個箭頭（或「三角形」）（突出顯示所選內容，而不是使用背景顏色更改）。表格行後的css三角形

三角形應該朝向左側，像這樣'<'。

我已經設法添加一個類到當前選定的行，我認爲其餘的只能在CSS中完成，但我一直沒能做到。

這裏是爲了突出該行的腳本：

document.querySelector('table').onclick = highlight; 

function highlight(e) { 
    e = e || event; 
    var from = findrow(e.target || e.srcElement), 
     highlighted = /highlighted/i.test((from || {}).className); 
    if (from) { 
     var rows = from.parentNode.querySelectorAll('tr'); 
     for (var i = 0; i < rows.length; i += 1) { 
      rows[i].className = ''; 
     } 
     from.className = !highlighted ? 'highlighted' : ''; 
    } 
} 

function findrow(el) { 
    if (/tr/i.test(el.tagName)) return el; 
    var elx; 
    while (elx = el.parentNode) { 
     if (/tr/i.test(elx.tagName)) { 
      return elx; 
     } 
    } 
    return null; 
}

這裏是我的CSS：

tr.highlighted td { 
    background: red; 
} 
tr.highlighted:after { 
    border-bottom: 60px solid transparent; 
    border-left: 60px solid green; 
    border-top: 60px solid transparent; 
    height: 0; 
    width: 0; 
    float:right; 
}

來源

2014-09-22 rityPY

不錯，你添加了jsfiddle的鏈接，但也請把重要的代碼放在帖子中（不要把小提琴鏈接變成代碼:)） – Rhumborl 2014-09-22 09:43:07

'內容' 必須解決你的問題。）

content: '';

http://jsfiddle.net/j95f8met/3/

來源

2014-09-22 09:44:53 MyMomSaysIamSpecial

這是對的，它好多了，謝謝。我對設計結果並不滿意。我怎麼能把這個三角形遠離桌子？ – rityPY 2014-09-22 09:51:57

填充。 http://jsfiddle.net/j95f8met/4/ – MyMomSaysIamSpecial 2014-09-22 09:52:32

好吧，幾乎在那裏，謝謝:)。現在我認爲剩下的只是將箭頭與線條垂直居中... jsfiddle.net/j95f8met/5任何想法如何做到這一點？ – rityPY 2014-09-22 10:04:28

您需要在:after僞元素上設置content屬性。

爲什麼這是必需的，你可以閱讀下面這個問題：Why do pseudo-elements require a content property?

所以，從技術上說，你也可以添加content: "\003c";，你會得到字符（ - 小於）<。這可以用來替換您爲創建三角形而設置的邊框。

款式的<字符，那麼你可以使用font-family，color，font-size等

要放置<角色更合適，你可以用CSS positioning工作。

希望這會有所幫助。

來源

2014-09-22 09:55:18

表格行後的css三角形

回答

相關問題