CSS arrow positioning

Question

I have two different types of div, each should have an arrow attached to the side that points at the image next to it. However, it looks like this:

http://jsfiddle.net/990h3wot/1/

How do I make the arrows move to the side of the divs rather than sit inside them as they are doing now?

Answer 1

You must give the arrow parents,.home-link-left .home-link-right, position:relative:

.home-link-left, .home-link-right{
vertical-align:middle;
margin:auto;
width:35vmin;
height:12vmin;
border:0.7vmin outset #232323;
background-color:#606060;
background: -webkit-radial-gradient(#707070, #505050);
background: -moz-radial-gradient(#707070, #505050);
background: -o-radial-gradient(#707070, #505050);
background: radial-gradient(#707070, #505050);
color:white;
position:relative;/*<- Position:relative;*/
}

And give the pseudo element arrows a position left or right:

.home-link-left:before{
border-left:4vmin solid red;
right:-4vmax;
}
.home-link-right:after{
border-right:4vmin solid red;
   left:-4vmax; 
}

JSFiddle

Answer 2

Position .home-link-left and .home-link-right relatively and set left and right properties of :before and :after :pseudo-elements.

Fiddle

.home-link-left,
.home-link-right {
  vertical-align: middle;
  margin: auto;
  width: 35vmin;
  height: 12vmin;
  border: 0.7vmin outset #232323;
  background-color: #606060;
  background: -webkit-radial-gradient(#707070, #505050);
  background: -moz-radial-gradient(#707070, #505050);
  background: -o-radial-gradient(#707070, #505050);
  background: radial-gradient(#707070, #505050);
  color: white;
  position: relative;
}
.home-link-left {
  border-radius: 20px 0px 0px 20px;
  left: 0px;
  border-right: 0px solid transparent;
}
.home-link-right {
  border-radius: 0px 20px 20px 0px;
  right: 0px;
  border-left: 0px solid transparent;
}
.home-link-left:before,
.home-link-right:after {
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  border-bottom: 6vmin solid transparent;
  border-top: 6vmin solid transparent;
  vertical-align: middle;
  display: block;
}
.home-link-container {
  width: 45vmin;
  height: 13vmin;
  margin: auto;
  vertical-align: middle;
}
.home-link-left:before {
  border-left: 4vmin solid red;
  right: -4vmin;
}
.home-link-right:after {
  border-right: 4vmin solid red;
  left: -4vmin;
}
.home-link-image {
  border: 0.7vmin outset #333333;
  vertical-align: middle;
  margin-top: -10%;
  margin: auto;
  width: 35vmin;
  height: 25vmin;
  border-radius: 20px;
}

<table id="home-table">
  <tr>
    <td>
      <div class="home-link-container">
        <div class="home-link-left">
          <a href="#"></a>
        </div>
      </div>
    </td>
    <td>
      <div class="home-link-image"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="home-link-image"></div>
    </td>
    <td>
      <div class="home-link-container">
        <div class="home-link-right">
          <a href="#"></a>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="home-link-container">
        <div class="home-link-left">
          <a href="#"></a>
        </div>
      </div>
    </td>
    <td>
      <div class="home-link-image"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="home-link-image"></div>
    </td>
    <td>
      <div class="home-link-container">
        <div class="home-link-right">
          <a href="#"></a>
        </div>
      </div>
    </td>
  </tr>
</table>