0

I'm implementing a CSS triangle but it has whitespace on the right. I would like to display some text on the right of the triangle. I have tried editing the margin and the padding but had no success yet. I found other examples of CSS triangles like this one which also have whitespace on the right.

Anyone got a suggestion how to remove this?

I used http://apps.eky.hk/css-triangle-generator/

with this CSS code 

width: 0px;
height: 0px;
border-style: solid;
border-width: 35px 22.5px 0 22.5px;
border-color: #ff5154 transparent transparent transparent;

Here's the example http://jsfiddle.net/g3b6w/

Icarus
  • 1,627
  • 7
  • 18
  • 32
timmy
  • 468
  • 1
  • 6
  • 21
  • 4
    What do you mean by whitespace? It seems ok to me. http://jsfiddle.net/g3b6w/1/ – XCS Mar 10 '14 at 15:04
  • What you really want is to have a text to the right of the triangle? This is just the positioning of the element and nothing more. – Elton Mesquita Mar 10 '14 at 15:07
  • I updated jsfiddle with an example. I would like the figures to be displayed right next to the arrow. But the whitespace next to the arrow keeps pushing the figures down. http://jsfiddle.net/g3b6w/5/ – timmy Mar 10 '14 at 15:08
  • Just float both elements, and change order, triangle goes after the `.figures-negative` element – n1kkou Mar 10 '14 at 15:10
  • You could use a [text-only solution](http://stackoverflow.com/a/16231703/1437016), just remove the `-webkit-text-stroke`, and you'll have an inlined triangle (you could even make a pseudo-element containing your triangle) – Maen Mar 10 '14 at 15:13

2 Answers2

1

Add following css.

.triangle {
    display: inline-block;
}

Or you can use float property.

.triangle {
    float: left;
}
Iqbal Kabir
  • 1,518
  • 10
  • 16
1

Add the text to the right by using display: inline-block; See http://jsfiddle.net/ben1/g3b6w/6/

display: inline-block;
Ben
  • 1,434
  • 14
  • 23