Thiết kế File Icons với CSS3

Hôm nay mình xin chia sẻ cho các bạn một icon thường rất hay sử dụng trong các trang web, đó là file icon. Đặc biệt là icon này được làm hoàn toàn bằng CSS3 mà không phải sử dụng bất kì một file hình ảnh nào.

HTML

Chúng ta sẽ chỉ cần một đoạn html đơn giản như sau :

<div></div>

CSS

Và đây là đoạn css3 giúp chúng ta tạo icon như sau :

body {

  background: #222;

}

div {

  width: 200px;

  height: 240px;

  line-height: 60px;

  background: #eee;

  text-align: center;

  font-size: 480px;

  position: absolute;

  top: 0; left: 0; right: 0; bottom: 0;

  margin: auto;

  overflow: hidden;

}

div:before {

  content: "---";

  display: block;

}

div:after {

  content: "";

  display: block;

  position: absolute;

  top: 0; right: 0;

  width: 0;

  height: 0;

  border: solid 80px transparent;

  border-left: none;

  border-top: none;

  border-bottom: solid 80px #ccc;

  background: #222;

}

Để có thể xem icon này hoàn chỉnh nhất, các bạn nên xem ở trình duyệt Chrome. Thật đơn giản phải không các bạn, mình hy vọng là qua bài viết ngắn ngủi này, các bạn sẽ học thêm về cách sử dụng những thuộc tính mới của CSS3 và nhất là có thể áp dụng icon này vào chính trang web hay blog mà các bạn đang sở hữu.