<!DOCTYPE html> | |
<html> | |
<head> | |
<style type='text/css'> | |
body { | |
zoom: 1.1; | |
background: white; | |
} | |
.button-wide { | |
display: inline-block; | |
position: relative; | |
border: solid black; | |
border-width: 0 1px; | |
} | |
.button-shadow { | |
background: white; | |
height: 0.75em; | |
left: 0; | |
overflow: hidden; | |
position: absolute; | |
right: 0; | |
top: 0; | |
} | |
.button-text { | |
line-height: 1.5em; | |
position: relative; | |
padding: 0 1em; | |
text-align: center; | |
} | |
.box { | |
position: relative; | |
width: 51px; | |
height: 20px; | |
background: black; | |
} | |
.box > div { | |
position: absolute; | |
left: 1px; | |
right: 1px; | |
height: 1.5em; | |
background: white; | |
} | |
</style> | |
</head> | |
<body> | |
<div style="padding: 10px; font-size: 81.25%"> | |
<div class="button-wide"> | |
<div class="button-middle"> | |
<div class="button-shadow"></div> | |
<div class="button-text"> </div> | |
</div> | |
</div> | |
</div> | |
<div class="box"> | |
<div> </div> | |
</div> | |
<p> | |
The two figures above should have solid 1px borders of the same height on each side. | |
</p> | |
</body> | |
</html> | |