Share Vẽ biểu tượng hình bát quái với CSS

filiallion

Administrator
Staff member
Administrator
Messages
560
Points
10
Language
Tiếng Việt
Tiếp tục với việc vẽ các biểu tượng tưởng chừng như phức tạp nhưng thực tế lại đơn giản, bài viết này tôi sẽ hướng dẫn các bạn vẽ biểu tượng hình bát quái bằng cách sử dụng các thuộc tính CSS cơ bản. Khi nhìn vào biểu tượng hình bát quái, các bạn sẽ thấy các đường cong uốn lượn thật khó để vẽ phải không? Nhưng thực tế các đường cong đó hoàn toàn có thể vẽ được chỉ với thuộc tính border-radius quen thuộc.

Các bạn tham khảo nội dung mã lệnh CSS như sau:
CSS:
.yin-yang {
    width: 96px;
    height: 48px;
    position: relative;
    background: #eee;
    border-color: #ff0000;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
}

.yin-yang::before {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 0;
    content: "";
    background: #eee;
    border: 18px solid #ff0000;
    border-radius: 100%;
}

.yin-yang::after {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    background: #ff0000;
    border: 18px solid #eee;
    border-radius: 100%;
}
Và vẽ biểu tượng hình bát quái bằng dòng lệnh HTML sau:
HTML:
<div class="yin-yang"></div>
 
Top