Question

I have a table. Inside that table some td have the class “arrow”. For the td that have this class I would like to put an arrow (triangle) on the left border of that td. I would like to use only css to achieve that. Note that I wish the arrow to start below the top border and end above the bottom border. I tried to apply several “pure css arrows tutorials” I found on the internet but I do not manage to make it work on td. I hope I was clear and I hope someone might help. Thank you in advance for your replies. Cheers. Marc.

http://cssdesk.com/PzASe

My HTML :

<table>
  <tr>
    <td>td1</td>
    <td class="arrow">td2</td>
    <td class="arrow">td three</td>
  </tr>
  <tr>
    <td>td4</td>
    <td class="arrow">td five</td>
    <td class="arrow">td6</td>
  </tr>
</table>

My CSS:

table{
  border-spacing: 0px;
  border-collapse: collapse;
  text-align:center;
  vertical-align:middle;}

td{
  padding:10px;
  border:1px solid purple;}

.arrow:before { 
  content:'';
  position: relative; 
  top: 0; 
  left: -10; 
  border-top: 5px solid transparent; 
  border-bottom: 5px solid transparent; 
  border-right: 5px solid transparent; 
  border-left: 5px solid  black; 
}

Answer 1

What is your target audience with this? Most of the CSS techniques for drawing shapes like triangles involve things like insert new elements, and advanced CSS properties (read: don’t work in IE), I would suggest biting the bullet and using an old-fashioned background image.

If you’re doing it as a proof of concept, and you don’t care what browser a visitor is using, have you looked at this tutorial on CSS tricks?

You would need to insert a <div> into those cells, and then apply styling like this:

.arrow div {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid blue;
 }