Sử dụng border-radius để vẽ custom shape

Trick hay trong CSS sử dụng border-radius để vẽ hình
Sử dụng border-radius để vẽ custom shape

Anh Nils Binder nghĩ ra một trick khá hay để vẽ hình bằng border-radius

Bạn có thể dùng ngay luôn công cụ anh này làm, kéo chỉnh theo ý muốn, rồi copy giá trị.

Giải thích cách làm này

Sử dụng border-radius để vẽ custom shape

Nếu chúng ta set border-radius: 50%, giá trị % này là dựa trên chiều rộng và cao của element. Nếu element hình vuông, chúng ta có một hình tròn, là hình chữ nhật? chúng ta không nhận được hình tròn nữa.

Nếu set 4 giá trị khác nhau cho 4 góc

Sử dụng border-radius để vẽ custom shape

Mấy cách làm trên không có gì đặc biệt, điều đặc biệt là khi dùng giá trị với dấu /, theo kiểu

.element {
  border-radius: a b c d / e f g h;
}

Theo W3C định nghĩa 4 giá trước / sẽ là radius cho hướng nằm ngang, 4 giá trị sau / là giá trị radius cho hướng thẳng đứng, nếu không có dấu / coi như 2 giá trị này bằng nhau.

Như vậy, nếu set border-radius: 4em 8em sẽ khác với border-radius: 4em / 8em

Sử dụng border-radius để vẽ custom shape

Với cách làm này, ta có kết quả

Sử dụng border-radius để vẽ custom shape

Sử dụng border-radius để vẽ custom shape

Dễ như ăn cơm sườn há!!

Sử dụng border-radius để vẽ custom shape