Css3: Border-radius Tạo hình thật độc đáo

Thuộc tính border trong css để tạo đường viền cho các đối tượng và boder-radius trong Css3 dùng để bo tròn cho các đối tượng như chúng ta đã biết. và mọi người chỉ sử dụng để bo tròn đối tượng. Tuy nhiên ngoài viêc bo tròn đối tượng thì chúng ta còn có thể tận dụng border-radius cho việc tạo hình khác nhau như:hình kim tự tháp, hình vuông, hình tam giác, hình mũi tên , và nhiều hình thù khác…vv Nhiều bạn đặt câu hỏi tại sao chúng ta không dùng hình ảnh cho nhanh, cho dễ dàng mà phải mất công css như vậy? nếu ta dùng ảnh thì web ta sẽ có dung lượng lớn hơn so với ta style bằng css tuy chỉ vài KB thui nhưng giảm được chút nào tốt chút đấy, giảm mỗi thứ một chút trang web của mình sẽ nhẹ hơn –>tốc độ load sẽ nhanh lên…
bây giờ không những làm sao trang web của mình đạt chuẩn quốc tế W3C mà bạn còn phải học cách tối ưu hóa code, tối ưu hóa mọi thứ có thể để trang web của bạn có thể lcải thiện cũng như có tốc độ load nhanh hơn

---

Thật là thú vị phải không các bạn ! bây giờ chúng ta cùng thực hành nào:

-hình kim tự tháp:

.kimtuthap{
  height:0px; width:0px;
  border-bottom:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}

-hình kim tự tháp ngược:

.kimtuthapnguoc
{
  height:0px; width:0px;
  border-top:50px solid red;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}

-hình tam giác:

.tamgiac{
  height:0px; width:0px;
  border-left:50px solid green;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  float:left;
}

-Hình vuông 4 màu:

.hinhvuong{
  height:0px; width:0px;
  border-right:50px solid blue;
  border-top:50px solid gray;
  border-bottom:50px solid red;
  border-left:50px solid yellow;
}

Và một số hình khác:

---

ở đây tôi chỉ lấy vi dụ trên firefox (-moz-)

• -moz- hỗ trợ cho firefox.
• -webkit- hỗ trợ cho Google Chrome và Safari.
• -ms- hỗ trợ cho Internet Explorer.
• -o- hỗ trợ cho Opera.

Vietnit chúc các bạn thành công !

View Demo

By: Tran Vo.