<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 :)
.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