Css3: Tạo menu đẹp mắt với thuộc tính { border : giá trị; } , 2D tranform.

1. Tạo menu kiểu nghiêng theo trục X, hoặc trục Y.
Để tạo được menu có đường border chéo (nghiêng) như hình dưới, sử dụng thuộc tính sau:
{
transform: skew( 'value'deg);
}
Note:
- giá trị value âm theo trục X, menu nghiêng sang phải, giá trị value dương theo trục X menu nghiêng trái.
- giá trị value âm theo trục Y menu nghiêng lên trên, giá trị value dương theo trục Y menu đổ nghiêng xuống dưới.

2. Tạo menu bằng thuộc tính border kết hợp với giá trị transparent { border : giá trị; }

hãy nhìn vào hình dưới 

Lấy tâm làm chuẩn, góc nhọn hướng nào thì border viền hướng đó trong css là không xuất hiện:

-Vàng : left (border-left: yellow, border-top: transparent, border-bottom: transparent).

-Đỏ : bottom (border-left: transparent, border-right: transparent, border-bottom: red).

-Xanh : right (border-right: blue, border-top: transparent, border-bottom: transparent).

-Xám : top (border-left: transparent, border-right: transparent, border-top: gray).

Ở trên là border tạo thành các góc nhọn, muốn ẩn đi 1 phần hay góc nào đó ta dùng thuộc tính border cho viền đo và đặt giá trị là transparent.

Để biết thêm 1 số cách tạo đường viền đẹp xem tại đây: thuthuatweb.net

Từ những cơ bản trên bạn có thể tạo thêm nhiều hình khác nữa, hãy thử thay thế các giá trị và chạy thử trên w3school bạn sẽ thấy ngay.