JSFiddle - React, Tailwind, and code Playground
HTML
<div class="sticker" id="sticker2">
<div class="sticker-decoration sticker-ne"></div>
<div class="sticker-decoration sticker-nw"></div>
</div>
CSS
body {
background: #666;
}
.sticker {
position: absolute;
top: 200px;
left: 100px;
width: 250px;
height: 250px;
background: #ccc;
}
#sticker2 {
-moz-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
top: 200px;
left: 500px;
}
.sticker-decoration {
display: block;
font-size: 0.1px;
position: absolute;
z-index: 99999;
}
.sticker-n, .sticker-s{
background: url(http://cjslade.github.com/Exp2/standart-sides-horizontal-f1f1f1.png) repeat;
}
.sticker-e, .sticker-w {
background: url(http://cjslade.github.com/Exp2/standart-sides-vertical-f1f1f1.png) repeat;
}
.sticker-se, .sticker-sw, .sticker-nw, .sticker-ne {
background: url(http://cjslade.github.com/Exp2/standart-corners-f1f1f1.png) repeat;
}
.sticker-n {
height: 38px;
left: -1px; // was left: 0;
top: -38px;
right: -1px; // was width: 100%;
background-position: top left;
}
.sticker-s {
bottom: -38px;
height: 38px;
left: -1px; // was left: 0;
right: -1px; // was width: 100%;
background-position: bottom left;
}
.sticker-e {
bottom: -1px; // was height: 100%;
right: -38px;
top: -1px; // was top: 0;
width: 38px;
background-position: top right;
}
.sticker-w {
bottom: -1px; // was height: 100%;
left: -38px;
top: -1px; // was top: 0;
width: 38px;
background-position: top left;
}
.sticker-se {
height: 38px;
bottom: -38px;
right: -38px;
width: 38px;
background-position: bottom right;
}
.sticker-sw {
bottom: -38px;
height: 38px;
left: -38px;
width: 38px;
background-position: bottom left;
}
.sticker-nw {
height: 38px;
left: -38px;
top: -38px;
width: 38px;
background-position: top left;
}
.sticker-ne {
height: 38px;
right:...