Hướng dẫn beautiful border css - css viền đẹp

Như tiêu đề bài viết, bài này mình sẽ 'giới thiệu' về Border trong CSS - với những khả năng 'có thể bạn chưa biết', ứng dụng để vẽ nhé

'Tâm hồn' của border

Đầu tiên mình sẽ giới thiệu lại về các attribute của border đã nhé, sau đấy sẽ tiện 'vào việc' hơn

• border-width: Độ dày của đường viền (border)
• border-color: Màu sắc của đường viền
• border-style: Kiểu đường viền (solid, dashed, dotted...)
• border-radius: Độ bo tròn của đường viền

Rồi, những điều trên ai cũng dùng, ai cũng biết rồi, nên mình không giới thiệu nữa. Giờ mình sẽ dùng 4 cái này để vẽ, xem nó làm được những trò trống gì nhé

Mài 1 cục kim cương

Border-width

Thông thường, mọi người chỉ dùng border kiểu:

.diamond {
  position: relative;
  width: 200px;
  height: 200px;
}
.diamond-part {
  position: absolute;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
  border-top: solid coral;
  border-right: solid lightgreen;
  border-bottom: solid gold;
  border-left: solid lavender;
  border-width: 50px;
}

.diamond-part:nth-child(2) {
  left: 100px;
}
.diamond-part:nth-child(3) {
  top: 100px;
}
.diamond-part:nth-child(4) {
  left: 100px;
  top: 100px;
}

0 thôi, mà không để ý rằng khi tăng max border lên thì sẽ làm được những gì

Dưới đây mình sẽ minh họa sự thay đổi của hình dạng box khi border có độ dày khác nhau nhé:

Nguyên lý của việc đó chính là tùy chỉnh border của 1 element, tùy theo góc/hướng của đỉnh tam giác bạn cần.

Chẳng hạn, như hình trên, mình muốn tạo tam giác cân có đáy lộn lên trên, song song với mặt đất, thì chỉ cần tạo 1 div có chiều cao gấp đôi chiều cao cần, rồi set border-top = chiều cao mong muốn với màu mong muốn, các cạnh còn lại cho nó transparent hết, thế là xong rồi

Hoặc nếu, mình cần tam giác vuông mà không cân, thì tùy biến 2 cạnh liền nhau, rồi transparent 2 cạnh còn lại đi là xong, xoay lại hình cho chuẩn nữa là được rồi.

Nếu bạn muốn tam giác bất kỳ, chẳng vuông, chẳng cân, thì bạn sẽ cần sử dụng clip path chứ không phải border dâu , sau này mình sẽ giới thiệu sau.

, sau này mình sẽ giới thiệu sau.

Mô hình kim cương

Viên kim cương này mình làm đơn giản thôi, cấu tạo từ các hình tam giác vuông cân - mẫu hình kim cương điển hình thường gặp. Vậy là mình có bản vẽ dưới đây:

Nhìn trên hình thì rõ ràng rồi, tạo 4 khối với border full, rồi xóa 2 border của 1 hình đi, xong xoay cả group lại là xong

Giờ bắt đầu làm này:

<div class="diamond">
    <span class="diamond-part">span>
    <span class="diamond-part">span>
    <span class="diamond-part">span>
    <span class="diamond-part">span>
div>

Mỗi span chính là 1 khối với các border dày, mình css cho 1 border và nhân mẫu ra thôi:

.diamond {
  position: relative;
  width: 200px;
  height: 200px;
}
.diamond-part {
  position: absolute;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
  border-top: solid coral;
  border-right: solid lightgreen;
  border-bottom: solid gold;
  border-left: solid lavender;
  border-width: 50px;
}

.diamond-part:nth-child(2) {
  left: 100px;
}
.diamond-part:nth-child(3) {
  top: 100px;
}
.diamond-part:nth-child(4) {
  left: 100px;
  top: 100px;
}

Lưu ý: ở đây bắt buộc border-width phải là số và đơn vị tính chính xác, không thể sử dụng 50% được nhé, vì vậy nên vẽ bằng border này không thể flexible theo hình bao nó như img được khi chỉ dùng css được.

Xong được 1 nửa rồi. Tiếp theo để 'cắt đầu' tạo mũ kim cương như bản vẽ ở trên, mình sẽ ẩn đi border top + border left của khối 1 bằng cách cho nó transparent:

Chú ý nho nhỏ, ở đây mình phải set là:

.diamond {
  position: relative;
  width: 200px;
  height: 200px;
}
.diamond-part {
  position: absolute;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
  border-top: solid coral;
  border-right: solid lightgreen;
  border-bottom: solid gold;
  border-left: solid lavender;
  border-width: 50px;
}

.diamond-part:nth-child(2) {
  left: 100px;
}
.diamond-part:nth-child(3) {
  top: 100px;
}
.diamond-part:nth-child(4) {
  left: 100px;
  top: 100px;
}

1 hoặc:

.diamond {
  position: relative;
  width: 200px;
  height: 200px;
}
.diamond-part {
  position: absolute;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
  border-top: solid coral;
  border-right: solid lightgreen;
  border-bottom: solid gold;
  border-left: solid lavender;
  border-width: 50px;
}

.diamond-part:nth-child(2) {
  left: 100px;
}
.diamond-part:nth-child(3) {
  top: 100px;
}
.diamond-part:nth-child(4) {
  left: 100px;
  top: 100px;
}

2 chứ không phải chỉ thêm

.diamond {
  position: relative;
  width: 200px;
  height: 200px;
}
.diamond-part {
  position: absolute;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
  border-top: solid coral;
  border-right: solid lightgreen;
  border-bottom: solid gold;
  border-left: solid lavender;
  border-width: 50px;
}

.diamond-part:nth-child(2) {
  left: 100px;
}
.diamond-part:nth-child(3) {
  top: 100px;
}
.diamond-part:nth-child(4) {
  left: 100px;
  top: 100px;
}

3, vì khi gọi attribute

.diamond {
  position: relative;
  width: 200px;
  height: 200px;
}
.diamond-part {
  position: absolute;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
  border-top: solid coral;
  border-right: solid lightgreen;
  border-bottom: solid gold;
  border-left: solid lavender;
  border-width: 50px;
}

.diamond-part:nth-child(2) {
  left: 100px;
}
.diamond-part:nth-child(3) {
  top: 100px;
}
.diamond-part:nth-child(4) {
  left: 100px;
  top: 100px;
}

4, bạn sẽ set lại cả border-width, border-style và border-color, nên nếu chỉ viết như vậy thì sẽ hiểu là

.diamond {
  position: relative;
  width: 200px;
  height: 200px;
}
.diamond-part {
  position: absolute;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
  border-top: solid coral;
  border-right: solid lightgreen;
  border-bottom: solid gold;
  border-left: solid lavender;
  border-width: 50px;
}

.diamond-part:nth-child(2) {
  left: 100px;
}
.diamond-part:nth-child(3) {
  top: 100px;
}
.diamond-part:nth-child(4) {
  left: 100px;
  top: 100px;
}

5 đó nhé.

Đến đây còn bước cuối để tạo hình kim cương,

.diamond {
  position: relative;
  width: 200px;
  height: 200px;
}
.diamond-part {
  position: absolute;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
  border-top: solid coral;
  border-right: solid lightgreen;
  border-bottom: solid gold;
  border-left: solid lavender;
  border-width: 50px;
}

.diamond-part:nth-child(2) {
  left: 100px;
}
.diamond-part:nth-child(3) {
  top: 100px;
}
.diamond-part:nth-child(4) {
  left: 100px;
  top: 100px;
}

6 cho viên kim cương đứng lên là xong

.diamond {
  ...
  transform: rotate(45deg);
}

Mình sửa lại 1 chút màu mè cho đẹp, các bạn vào codepen tham khảo nhé: https://codepen.io/bunnypi04/pen/zYwdVzj

Viết 1 bức thư

Bức thư này thì trông vẫn giống cái khối chữ nhật với border full như ở trên thôi, các bạn có thể tạo dễ dàng như đã hướng dẫn, đổi tí màu mè là được này:

Như ở trên, set cho mỗi cạnh bức thư màu theo shade bạn mong muốn, và cho border full là được rồi

Gửi 1 trái tim

Mình muốn 1 trái tim ở giữa bức thư, vì vậy mình tạo 1 div trái tim bên trong bức thư và căn vào giữa như sau:

OK, bố cục đã xong, giờ tạo hình trái tim nữa nào. Tương tự như viên kim cương, mình có bản vẽ cho hình trái tim như sau:

Như hình vẽ, để tạo hình trái tim từ

.diamond {
  position: relative;
  width: 200px;
  height: 200px;
}
.diamond-part {
  position: absolute;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
  border-top: solid coral;
  border-right: solid lightgreen;
  border-bottom: solid gold;
  border-left: solid lavender;
  border-width: 50px;
}

.diamond-part:nth-child(2) {
  left: 100px;
}
.diamond-part:nth-child(3) {
  top: 100px;
}
.diamond-part:nth-child(4) {
  left: 100px;
  top: 100px;
}

7 đang là hình vuông hiện tại, mình cần 2 hình vuông kích thước bằng nó nữa, và dịch khỏi hình vuông hiện tại lần lượt là: lùi trái 50% và nâng lên 50%. Trong trường hợp này, mình sẽ sử dụng

.diamond {
  position: relative;
  width: 200px;
  height: 200px;
}
.diamond-part {
  position: absolute;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
  border-top: solid coral;
  border-right: solid lightgreen;
  border-bottom: solid gold;
  border-left: solid lavender;
  border-width: 50px;
}

.diamond-part:nth-child(2) {
  left: 100px;
}
.diamond-part:nth-child(3) {
  top: 100px;
}
.diamond-part:nth-child(4) {
  left: 100px;
  top: 100px;
}

8 là

.diamond {
  position: relative;
  width: 200px;
  height: 200px;
}
.diamond-part {
  position: absolute;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
  border-top: solid coral;
  border-right: solid lightgreen;
  border-bottom: solid gold;
  border-left: solid lavender;
  border-width: 50px;
}

.diamond-part:nth-child(2) {
  left: 100px;
}
.diamond-part:nth-child(3) {
  top: 100px;
}
.diamond-part:nth-child(4) {
  left: 100px;
  top: 100px;
}

9 và

.diamond {
  ...
  transform: rotate(45deg);
}

0 cùng

.diamond {
  ...
  transform: rotate(45deg);
}

1 để tạo:

Tiếp theo là bước bo tròn 2

.diamond {
  ...
  transform: rotate(45deg);
}

2. Lần này thì mình sử dụng tới border-radius này:

.heart:before, .heart:after {
  ...
  border-radius: 50%;
}

Có vẻ ok rồi đấy, xoay lại 1 tẹo nữa là xong:

.heart {
    ...
    transform: translate(-50%, -50%) rotate(45deg);
}

Thế là xong trái tim của bức thư rồi. Nhớ đổi màu lại nhé

Để thêm sinh động, cho trái tim đập bằng cách animation scale

.diamond {
  ...
  transform: rotate(45deg);
}

3 nhé:

.heart {
    ...
    animation: heart-beat 0.8s infinite;
}

@keyframes heart-beat {
  0% {
    scale: 1;
  }
  30% {
    scale: 0.8;
  }
}

Thành quả ra rồi đây: https://codepen.io/bunnypi04/pen/WNjZdpd