Wednesday, December 31, 2014

CSS arrow positioning.

<style type="text/css">

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

</style>

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


Output :)


No comments:

Post a Comment