Tạo cờ đỏ sao vàng đơn giản bằng CSS3

29/12/2014

Trước đây mình đã giới thiệu với các bạn rất nhiều cách tạo hình hoặc icon bằng CSS3, tiếp theo đây mình xin chia sẻ cho các bạn một icon rất đặc biệt nữa, đó là icon cờ việt nam, với icon này, các bạn có thể áp dụng cho những trang đa ngôn ngữ.

co-do-sao-vang

Xem Demo | Download

HTML

<div class='frame'>
  <div class='star'></div>
</div>

CSS

*, *:before *:after { box-sizing: border-box; }
.frame {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 75px; height: 75px;
  margin: auto;
  border-radius: 100%;
  background: #f46159;
  transform: scale(3);

}

.star {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 0; height: 0;
    margin: auto;
    border-width: 0 6px 16px;
    border-style: solid;
    border-color: transparent transparent #fbe069;
    transform: translateY(-14px);

  }

.star:before, .star:after {
      content: '';
      position: absolute;
      border-style: solid;
      border-color: transparent;
    }
    .star:before {
      border-width: 15px 22px;
      border-bottom-color: #fbe069;
      transform: translate(-16px, 1px) rotate(35deg);
    }
    .star:after {
      border-width: 15px 22px;
      border-bottom-color: #fbe069;
      transform: translate(-28px, 1px) rotate(-35deg);
    }

Mình mong là qua bài viết này các bạn sẽ có thể hiểu rõ và tự sáng tạo thêm cho mình những icon khác từ bài viết ngày hôm nay.
Chúc các bạn thành công !

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !