Màu sắc riêng biệt
Các bạn xem ví dụ sau.
Border 1
Cách làm.
HTML
<h4 class="border-1">Border 1</h4>
CSS
.border-1:after { content: ''; display: block; width: 100%; height: 5px; background-image: -webkit-linear-gradient(0deg, hsla(175, 70%, 40%, 1) 16.666667%, hsla(150, 70%, 40%, 1) 16.666667%, hsla(150, 70%, 40%, 1) 33.333333%, hsla(75, 70%, 40%, 1) 33.333333%, hsla(75, 70%, 40%, 1) 50%, hsla(25, 70%, 40%, 1) 50%, hsla(25, 70%, 40%, 1) 66.666667%, hsla(10, 70%, 40%, 1) 66.666667%, hsla(10, 70%, 40%, 1) 83.333333%, hsla(300, 70%, 40%, 1) 83.333333%); background-image: linear-gradient(to right, hsla(175, 70%, 40%, 1) 16.666667%, hsla(150, 70%, 40%, 1) 16.666667%, hsla(150, 70%, 40%, 1) 33.333333%, hsla(75, 70%, 40%, 1) 33.333333%, hsla(75, 70%, 40%, 1) 50%, hsla(25, 70%, 40%, 1) 50%, hsla(25, 70%, 40%, 1) 66.666667%, hsla(10, 70%, 40%, 1) 66.666667%, hsla(10, 70%, 40%, 1) 83.333333%, hsla(300, 70%, 40%, 1) 83.333333%); }
Pha trộn màu sắc
Ví dụ.
Border 2
Cách làm.
HTML
<h4 class="border-2">Border 2</h4>
CSS
.border-2:after { content: ''; display: block; width: 100%; height: 5px; background-image: -webkit-linear-gradient(left, #73D2F6, #08C 22%, #7FC400 36%, #FFD583 48%, #FFB21E 63%, #FF4D4D 76%, #503873); background-image: linear-gradient(to right, #73D2F6, #08C 22%, #7FC400 36%, #FFD583 48%, #FFB21E 63%, #FF4D4D 76%, #503873); }
Chỉ sử dụng background
Ví dụ.
Border 3
Cách làm.
HTML
<h4 class="border-3">Border 3</h4>
CSS
.border-3 { padding-bottom: 5px; background-image: -webkit-linear-gradient(0deg, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%); background-image: linear-gradient(to right, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%); -webkit-background-size: 100% 5px; -moz-background-size: 100% 5px; background-size: 100% 5px; background-repeat: no-repeat; background-position-y: bottom; }
Sử dụng thêm thẻ ul
Ví dụ.
Border 4
Cách làm.
HTML
<h4 class="border-4">Border 4</h4> <ul class="border-4-list"><li></li><li></li><li></li><li></li><li></li></ul>
CSS
.border-4 { margin-bottom: 0px; } ul.border-4-list { list-style: none; width: 100%; font-size: 0; margin: 0; padding: 0; } ul.border-4-list li { display: inline-block; width: 20%; height: 5px; } ul.border-4-list li:nth-child(1) { background: #2ecc71; } ul.border-4-list li:nth-child(2) { background: #3498db; } ul.border-4-list li:nth-child(3) { background: #f1c40f; } ul.border-4-list li:nth-child(4) { background: #2ecc71; } ul.border-4-list li:nth-child(5) { background: #3498db; }
Chúc các bạn thành công!