Sưu tầm

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ù

Để có được hình tam giác thì thật đơn giản với các công cụ đồ họa, đơn giản đến mức không cần vẽ mà chỉ cần chèn một hình shape trong hộp công cụ vậy là đã có được hình ảnh trong vài giây, nhưng nếu linh động và không muốn sử dụng hình ảnh bạn vẫn có thể tạo ra nó chỉ với vài thuộc tính CSS đơn giản, điều này sẽ có ích cho việc tạo ra những nút trên web hay ứng dụng làm tooltip. Đầu tiên chúng ta hãy cùng xem xét trường hợp nếu định kiểu đường viền cho một phần tử không mà không quan tâm đến kích thước phần tử đó như đoạn CSS sau: 1 .triangle{ 2    border-color :  blue   orange  red   green ; 3    border-style :  solid ; 4    border-width :  100px   100px   100px   100px ; 5    height :  0px ; 6    width :  0px ; 7 } Kết quả bạn có được 1 hình vuông được gép lại từ 4 tam giác tương ứng với 4 đường viền đã định kiểu, bây giờ nếu thay kiểu đường viền khác thì sẽ như thế nào? bạn sẽ thấy kết quả như hình dưới nếu xem trên trình duyệt firefox.