Tạo lá cờ Việt Nam bằng CSS3

Cập nhật: Lượt xem: 2569 [ Css ]

Trước đây, Laptrinhweb đã 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 Laptrinhweb 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ữ.

Tạo lá cờ Việt Nam bằng CSS3

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 !