Mẫu gốc rộng 20px
https://codepen.io/arbaoui_mehdi/pen/nZaEpj
mẫu tự sửa 60px
.shelf {
display: block;
position: relative;
width: 800px;
height: 60px;
margin: 100px auto 0;
background-image: linear-gradient(90deg, #d1d8de 0%, #c3cbd6 100%);
box-shadow: 0 2px 2px #647387, 0 4px 0 #889bae, 0 15px 18px -8px #000000;
}
.bookend_left {
display: block;
position: absolute;
left: -55px;
top: -28px;
width: 80px;
height: 62px;
background-color: #ffffff;
transform: rotate(35deg);
}
.bookend_left:before {
position: absolute;
top: 60px;
left: 65px;
width: 20px;
height: 20px;
background-color: #ffffff;
content: "";
transform: rotate(-35deg);
}
.bookend_right {
display: block;
position: absolute;
right: -55px;
top: -28px;
width: 80px;
height: 62px;
background-color: #ffffff;
transform: rotate(-35deg);
}
.bookend_right:before {
position: absolute;
top: 60px;
right: 65px;
width: 20px;
height: 20px;
background-color: #ffffff;
content: "";
transform: rotate(35deg);
}
.shelf .reflection {
display: block;
position: absolute;
top: 52px;
left: 1px;
width: 99.8%;
height: 1px;
background-image: linear-gradient(0deg, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.5) 35%, rgba(255, 255, 255, 1.0) 65%, rgba(255, 255, 255, 0.7) 100%);
}
Cần chỉnh lại màu cho giống kính glass.
bí quyết chỉnh kích thước. các thông số left và before sẽ bằng right.
.bookend_left {
display: block; jjjjjjjjjjjjjjjjjjjj
position: absolute; ddddddddddddddd
left: -25px; cccccccccccccccccccccccccc
top: -18px; kuuuuuuuuuuuuuuuuuuuuuuuuu
width: 36px; xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
height: 36px; vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
background-color: @color3;
//LESS Mixins
.transform (rotate(35deg));
}
.bookend_left:before {
position: absolute;
top: 31px; ++++++++++++++++++++++++++++++++++++++++++++++
left: 17px;
width: 20px; //////////////////////////////////////
height: 10px;
background-color: @color3;
content:"";
//LESS Mixins
.transform (rotate(-35deg));
}
chi can canh 1 ben trai voi chieu cao 60. ben con lai y nguyen nhu the
.bookend_right {
display: block; jjjjjjjjjjjjjjjjjjjjjjjjjj
position: absolute; dddddddddddddddddd
right: -25px; cccccccccccccccccccccccccc
top: -18px; kuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
width: 36px; xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
height: 36px; vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
background-color: @color3;
//LESS Mixins
.transform (rotate(-35deg));
}
.bookend_right:before {
position: absolute;
top: 31px; +++++++++++++++++++++++
right: 17px;
width: 20px; //////////////////////////
height: 10px;
background-color: @color3;
content:"";
//LESS Mixins
.transform (rotate(35deg));
}