CSS三角形是由父容器切出和搖動

我試圖做一些向上和向下箭頭，這依賴於股票價格的變化（https://jsfiddle.net/ec0x7pru/6/），他們似乎被切出，由於父容器CSS定義，是什麼將被修改CSS爲triangle-up和triangle-down類，以防止。CSS三角形是由父容器切出和搖動

.triangle-up { 
    display: inline-block; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 8px solid green; 
    bottom: 1em; 
} 

.triangle-down { 
    display: inline-block; 
    bottom: 1em; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 8px solid red; 
}

另一個說明，使用FF開發者版本，這些似乎稍微晃動？任何建議來解決這個問題。

來源

2016-04-23 Bondifrench

這是一個只有CSS-替代我其他的答案：鑑於填充

.container span { 
    padding-right: 0.3125rem; 
    font-family: "NHaasGroteskDSPro-75Bd", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 1.125rem; 
} 
.triangle-up { 
    display: inline-block; 
    border-style: solid; 
    border-width: 0 7px 14px 7px; 
    border-color: transparent transparent green transparent; 
    bottom: 1em; 
    padding-right:0px !important; 
} 

.triangle-down { 
    display: inline-block; 
    bottom: 1em; 
    border-style: solid; 
    border-width: 14px 7px 0 7px; 
    border-color: red transparent transparent transparent; 
    padding-right: 0px !important; 
}

，有一個在頂部平臺。我調整了邊界並重寫了它。

https://jsfiddle.net/ec0x7pru/19/

來源

2016-04-23 05:54:01 cst1992

Thanks @ cst1992，'！important'解決了我的問題。 – Bondifrench

不客氣。一定要在實現它之前進行搜索並完全理解它的使用。該標籤很容易被濫用。 – cst1992

刪除padding-right：

https://jsfiddle.net/ec0x7pru/7/

，並嘗試使用此：

border-style: inset

來源

2016-04-23 04:57:05 marcelo2605

是的，我想過了，但我需要修改三角形類而不是容器。填充權限影響容器中的其他元素，並且在刪除時，跨度看起來不太好。 – Bondifrench

@Bondifrench這個答案應該適合你。刪除'padding-right'並根據需要修改'border-width'。 –

@Mr_Green觸摸'浸軋right'手段接觸容器，這是我不想，因爲它影響容器的其他孩子，我只是想修改2'triangle'類的屬性。三角形的切除是在高度上，而不是在寬度上。 – Bondifrench

使用，而不是一個角色：

<div class="container"> 
<span>DAX</span> 
    <span>3000</span> 

    <span id="up">&#9650;</span><span>50.6</span> 
    <span>CAC 40</span> 
    <span>4536</span> 
    <span id="down">&#9660;</span><span>-23.2</span> 
</div>

https://jsfiddle.net/ec0x7pru/13/

來源

2016-04-23 04:58:05 cst1992

臨屋是一個不錯的建議，但我想修改該三角形類，而不是它的內容。 – Bondifrench

還有什麼依賴於它的？如果你願意，你可以很好地變換的'ID =「上/下」類=「向上/向下」'要能夠在任何地方使用它。現在我不明白它是如何產生影響的。 – cst1992

的變化和箭頭的方向是計算上的蒼蠅，所以只是將一個類讓我只做一更新，而不是2，如果我需要修改範圍的內容。 – Bondifrench

CSS三角形是由父容器切出和搖動

回答

相關問題