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
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
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
Với cách làm này, ta có kết quả
Dễ như ăn cơm sườn há!!
Initializing...