Share Vẽ hình bát giác với CSS

filiallion · 05/04/2018

Thật sự thì việc vẽ các hình học bằng CSS là khá đơn giản, chỉ với vài dòng lệnh CSS là các bạn hoàn toàn có thể vẽ các dạng hình học mà các bạn muốn. Với bài viết này thì tôi sẽ hướng dẫn các bạn vẽ hình bát giác. Đối với hình bát giác thì các bạn không có nhiều kinh nghiệm về CSS sẽ cảm thấy thật khó khăn nếu chỉ dùng CSS nhưng đối với các bạn có kinh nghiệm về CSS thì việc vẽ hình bát giác là không quá phức tạp.

Các bạn tham khảo nội dung mã lệnh CSS sau:

CSS:

.octagon {
    width: 100px;
    height: 100px;
    position: relative;
    background: #0062af;
}

.octagon::before {
    width: 40px;
    height: 0;
    position: absolute;
    content: "";
    border-bottom: 30px solid #0062af;
    border-left: 30px solid #fff;
    border-right: 30px solid #fff;
}

.octagon::after {
    width: 40px;
    height: 0;
    margin: 70px 0 0 0;
    position: absolute;
    content: "";
    border-top: 30px solid #0062af;
    border-left: 30px solid #fff;
    border-right: 30px solid #fff;
}

Để vẽ hình bát giác các bạn sử dụng dòng lệnh HTML sau:

HTML:

<div class="octagon"></div>

Share Vẽ hình bát giác với CSS

filiallion

Administrator