Share Tạo ngôi sao 6 cánh với CSS

[filiallion]

Language

Tiếng Việt

Bài viết này tôi hướng dẫn nhanh các bạn vẽ ngôi sao 6 cánh bằng CSS. Các bạn tham khảo nội dung mã lệnh như sau:

.six-point-star {
    width: 0;
    height: 0;
    position: absolute;
    border-bottom: 80px solid #0062af;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

.six-point-star::after {
    width: 0;
    height: 0;
    margin: 30px 0 0 -50px;
    position: absolute;
    content: "";
    border-top: 80px solid #0062af;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

Và để vẽ hình ngôi sao 6 cánh các bạn sử dụng như sau:

<div class="six-point-star"></div>