Sáng tạo icons cờ đỏ sao vàng đơn giản bằng CSS3

 Xem demo  Download demo

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

css3, css3 icons, cờ đỏ sao vàng, html, code css

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.

 

 HỖ TRỢ TRỰC TUYẾN