Hướng dẫn sử dụng Border Corner Shape trong CSS3

Chúng ta đã thấy một số tính năng CSS3 mới được triển khai rộng rãi, chẳng hạn như Rounded Corner, Box Shadow và Text Shadow. Tuy nhiên, có một số tính năng mang tính thú vị vẫn đang trong giai đoạn thử nghiệm, chẳng hạn như Border Corner Shape, chúng ta sẽ thảo luận nó trong bài viết này:

Border Corner Shape cho phép chúng ta thao tác chỉnh sửa các góc phần tử HTML linh hoạt hơn nữa.

Mặc dù chúng ta có thể tạo các góc tròn bằng cách sử dụng border-radius, nhưng Border Corner Shape cho phép chúng ta tạo các góc vát, góc tròn ngược và góc hình chữ nhật.

Làm thế nào để sử dụng Border Corner Shape?

Chúng ta sử dụng border-corner-shape để xác định hình dạng góc của phần tử. Tại thời điểm viết bài này, nó chấp nhận bốn hình dạng được xác định trước với các giá trị sau: curve (đường cong), scoop (Góc tròn ngược), bevel (Góc vát) và notch.

• Tìm hiểu thêm về Border Corner Shape tại đây

Chúng ta cũng sẽ sử dụng cubic-bezier để tạo hình dạng tùy chỉnh (xem đề xuất ở đây).

Điều đáng chú ý là border-corner-shape chỉ khai báo hình dạng, trong khi chiều dài của hình dạng được chỉ định bằng cách sử dụng thuộc tính border-radius.

Vì vậy, để có thể nhìn thấy kết quả, khi tạo hình ở góc biên thì hai thuộc tính này phải được khai báo cùng nhau.

.box {
  background-color: #3498DB;
  border-corner-shape: scoop;
  border-radius: 30px;
  width: 200px;
  height: 200px;
}

Lấy ví dụ về các mã css ở trên, chúng ta sẽ nhận được kết quả như trong ảnh bên dưới đây

Hãy cùng xem một ví dụ nữa. Lần này, chúng ta chỉ định hình dạng góc thành góc xiên và đặt bán kính đường viền cho 50% ngoại trừ ở góc dưới bên phải, như sau.

.box {
  background-color: #3498DB;
  border-corner-shape: bevel;
  border-radius: 50% 50% 0% 50%;
  width: 200px;
  height: 200px;
}

Kết quả sẽ nhận được hình như sau:

Note: Bạn nào khá loay hoay với việc CSS thẻ tag, thẻ giảm giá thì khi thuộc tính này chính thức được hỗ trợ thì chắc sẽ vui lắm đây.

Mặc dù vẫn chưa cần phải dùng đến SVG mà đã có được hình dạng khá là phong phú rồi đấy nhỉ.

Lời kết

CSS rất là thú vị phải không? Nếu bạn muốn trở thành Lập trình viên Front end tốt thì hãy tìm hiểu nhiều thêm về CSS3, cách các thuộc tính làm việc với nhau như thế nào nhé.

Có rất nhiều thuộc tính CSS hữu ích giúp bạn tiết kiệm kha khá thời gian đấy.

DevNET