Cách tạo Ribbon CSS

Chúng tôi cũng đặt kích thước cơ bản và màu nền với CSS.

 .thẻ màu nền: màu be; chiều cao: 300px; lề: 40px; chiều rộng: 500px;  

Phần giữa của dải băng

Chúng tôi sẽ sử dụng một Biến CSS (cho phép chúng tôi lưu trữ và sử dụng lại giá trị CSS) được gọi là --p đến lưu trữ giá trị đệm. Giá trị của đệm tài sản sử dụng var (- p) cú pháp cho phần đệm bên trái và bên phải của ruy-băng để có thể dễ dàng mở rộng. Các --p biến sau sẽ là tái sử dụng nhiều lần; Điều đó làm cho mã của chúng tôi linh hoạt.

 .ruy băng --p: 15px; màu nền: rgb (170,170,170); chiều cao: 60px; đệm: 0 var (- p); chiều rộng: 100%;  

Trên ảnh chụp màn hình bên dưới, bạn có thể thấy bản demo của mình trông như thế nào vào thời điểm này:

Định tâm ruy băng

Chúng ta cũng cần phải trung tâm ruy băng. Chúng tôi đẩy nó sang trái bởi kích thước đệm (được đánh dấu bởi --p biến) sử dụng định vị tương đối.

 .ruy băng --p: 15px; màu nền: rgb (170,170,170); chiều cao: 60px; đệm: 0 var (- p); vị trí: tương đối; phải: var (- p); chiều rộng: 100%;  

Bản demo được cập nhật:

Các mặt của ruy băng

Bây giờ chúng tôi tạo ra bên trái và bên phải của ruy băng nó dường như uốn cong quanh mép thẻ. Để làm như vậy, chúng tôi sử dụng cả :trước và :sau yếu tố giả của .ruy băng.

Cả hai yếu tố giả đều thừa hưởng màu nền của .ruy băng, và chúng tôi sử dụng bộ lọc: độ sáng (.5) quy tắc để làm tối màu của họ một chút. Họ cũng vị trí tuyệt đối trong phạm vi cha mẹ (tương đối định vị) của họ.

Chiều rộng của chúng cần phải là giống như kích thước đệm, và chúng tôi đặt chúng ở đầu bên trái và bên phải của dải băng sử dụng trái: 0 và phải: 0 quy tắc phong cách.

 .ruy băng: trước, .ribbon: sau nền-màu: kế thừa; content phải: 0; 

Bây giờ dải băng với các mặt mà chúng ta vừa thêm trông như dưới đây:

Xiên hai bên

Để làm cho các mặt của ruy băng nhìn cong, chúng ta cần phải nghiêng hai bên 45 °. Các biến đổi: skewy () Quy tắc CSS các yếu tố xiên theo chiều dọc.

 .ruy băng: trước trái: 0; biến đổi: xiên (45deg);  .ribbon: sau phải: 0; biến đổi: xiên (-45deg);  

Như bạn có thể thấy các cạnh của các mặt không căn chỉnh sau khi biến đổi, vì vậy chúng ta cần phải để họ xuống.

Căn chỉnh các bên

Đến xác định độ dài phù hợp bằng cách chúng ta cần di chuyển các cạnh xuống, chúng ta chuyển sang lượng giác. Những gì chúng ta cần tìm là x, như y là chiều rộng của các cạnh (bằng với kích thước đệm của .ruy băng) và góc θ là 45 ° (góc nghiêng).

Kết quả x sau đó cần phải giảm một nửa, cũng như bên trái và bên phải.

Nếu bạn đang sử dụng bất kỳ bộ tiền xử lý CSS nào, hãy kiểm tra xem nó có tan chức năng, nếu không, hãy tham khảo biểu đồ tiếp tuyến hoặc máy tính để tìm ra giá trị tiếp tuyến của góc. Chúng tôi may mắn vì tan 45 ° Là 1, có nghĩa là giá trị của x tương đương với y trong trường hợp của chúng ta.

 .ruy băng: trước, .ribbon: sau nền-màu: kế thừa; nội dung: "; display: block; filter: độ sáng (.5); height: 100%; vị trí: tuyệt đối; top: calc (var (- p) / 2); width: var (- p); 

Kể từ khi x phải giảm một nửa, chúng tôi sử dụng calc () Hàm CSS để thực hiện việc phân chia --p biến.

Cuối cùng chúng ta cần phải căn chỉnh các cạnh dọc theo trục z cũng vậy, vì vậy hãy thêm chỉ số z: -1 quy tắc sang hai bên để đặt chúng phía sau phần giữa của dải băng.

 .ruy băng: trước, .ribbon: sau nền-màu: kế thừa; nội dung: "; display: block; filter: độ sáng (.5); height: 100%; vị trí: tuyệt đối; top: calc (var (- p) / 2); width: var (- p); z- chỉ số: -1; 

Bây giờ chúng ta đã căn chỉnh các cạnh, dải băng CSS của chúng ta đã hoàn thành.

Dưới đây bạn có thể kiểm tra bản demo trực tiếp một lần nữa, xin lưu ý rằng nó cũng sử dụng một số kiểu dáng bổ sung.