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

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ữ.

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;
  awidth: 75px; height: 75px;
  margin: auto;
  border-radius: 100%;
  background: #f46159;
  transform: scale(3);

}

.star {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    awidth: 0; height: 0;
    margin: auto;
    border-awidth: 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-awidth: 15px 22px;
      border-bottom-color: #fbe069;
      transform: translate(-16px, 1px) rotate(35deg);
    }
    .star:after {
      border-awidth: 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: Css

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