.set_top_line(@c: #C7C7C7) {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid @c;
transform-origin: 0 0;
-webkit-transform: scaleY(1 / 3);
transform: scaleY(1 / 3);
}
.set_bottom_line(@c: #C7C7C7) {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid @c;
transform-origin: 0 100%;
-webkit-transform: scaleY(1 / 3);
transform: scaleY(1 / 3);
}
.set_left_line(@c: #C7C7C7) {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 100%;
border-left: 1px solid @c;
transform-origin: 0 0;
-webkit-transform: scaleX(1 / 3);
transform: scaleX(1 / 3);
}
.set_right_line(@c: #C7C7C7) {
content: " ";
position: absolute;
right: 0;
top: 0;
width: 1px;
height: 100%;
border-right: 1px solid @c;
transform-origin: 0 100%;
-webkit-transform: scaleX(1 / 3);
transform: scaleX(1 / 3);
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid @c;
transform-origin: 0 0;
-webkit-transform: scaleY(1 / 3);
transform: scaleY(1 / 3);
}
.set_bottom_line(@c: #C7C7C7) {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid @c;
transform-origin: 0 100%;
-webkit-transform: scaleY(1 / 3);
transform: scaleY(1 / 3);
}
.set_left_line(@c: #C7C7C7) {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 100%;
border-left: 1px solid @c;
transform-origin: 0 0;
-webkit-transform: scaleX(1 / 3);
transform: scaleX(1 / 3);
}
.set_right_line(@c: #C7C7C7) {
content: " ";
position: absolute;
right: 0;
top: 0;
width: 1px;
height: 100%;
border-right: 1px solid @c;
transform-origin: 0 100%;
-webkit-transform: scaleX(1 / 3);
transform: scaleX(1 / 3);
}
&:after{
content: '';
width:300%;
height:300%;
position:absolute;
top: 0;
left: 0;
border: 1px solid @c;
border-radius:4px;
-webkit-transform: scale(1 / 3);
transform: scale(1 / 3);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}