CODEWITHSUNDEEP
css
Bondifrench
Bondifrench

Reputation: 1292

css triangle being cut-out by parent container and shaking

I am trying to do some up and down arrows, which depend on stock price changes (https://jsfiddle.net/ec0x7pru/6/), they seem to be cut out due to the parent container css definition, what would be modified CSS for the triangle-up and triangle-down classes to prevent that.

.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;
}

On another note, using FF developer edition, these seem to be shaking slightly? any suggestion to fix that.

Upvotes: 0

Views: 142

Answers (3)

cst1992
cst1992

Reputation: 3941

This is a CSS-only alternative to my other answer:

.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;
}

Due to that padding, there was a plateau on the top. I've tweaked borders and overridden that.

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

Upvotes: 0

cst1992
cst1992

Reputation: 3941

Use a character instead:

<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/

snapshot

Upvotes: 0

marcelo2605
marcelo2605

Reputation: 2794

Remove padding-right:

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

And try to use this:

border-style: inset

Upvotes: 1

Related Questions