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)); }