- Messages
- 585
- 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
Các bạn tham khảo nội dung mã lệnh CSS như sau:
Và vẽ biểu tượng hình bát quái bằng dòng lệnh HTML sau:
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%;
}
HTML:
<div class="yin-yang"></div>