Skip to content

Instantly share code, notes, and snippets.

@shabunc
Created January 25, 2012 15:52
Show Gist options
  • Select an option

  • Save shabunc/1676896 to your computer and use it in GitHub Desktop.

Select an option

Save shabunc/1676896 to your computer and use it in GitHub Desktop.
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
.boxA {
font-family: Arial;
position: relative;
width: 100px;
height: 100px;
background: yellow url(http://upload.wikimedia.org/wikipedia/cv/0/0c/Firefox-logo.png);
background-size: cover;
display: block;
font-weight: bold;
color: white;
text-align: center;
-webkit-box-reflect: below 5px;
}
.boxA::before {
content:'';
width: 100px;
height: 100px;
display: block;
position: absolute;
top: 100px;
left:50px;
background: red;
background-position: 150px;
background: -moz-element(#reflex);
transform: skewX(45deg) rotate(180deg) scaleX(-1);
border-bottom: 1px solid black;
}
<!-- content to be placed inside <body>…</body> -->
<div class="boxA" id="reflex">
some text
</div>
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment