Đã đăng vào thg 10 21, 2019 2:31 SA 3 phút đọc
Giới thiệuGần đây, chúng tôi đã làm việc trong một dự án liên quan đến hình tròn, hình thu nhỏ tròn, nút tròn, container tròn,... Trong bài viết hôm nay mình sẽ chia sẻ cho các bạn các cách tạo hình tròn bằng CSS. Nếu các bạn đang gặp phải vấn đề về tạo hình tròn trong CSS thì đây sẽ là bài viết hữu ích dành cho bạn. Có một số kỹ thuật để xác định hình dạng tròn động trong HTML và CSS, mỗi cái có ưu và nhược điểm riêng. Dưới đây là một số cách tôi đã thử nghiệm
nhiều nhất, từ phổ biến nhất đến ít dùng nhất.
Border radiusKỹ thuật phổ biến nhất là làm tròn tất cả các góc bằng cách set border-radius: 50% . Đây là kỹ thuật đơn giản nhất được sử dụng và hỗ trợ đa trình duyệt. Thuộc tính border-radius cũng sẽ ảnh hưởng đến border, box-shadow và kích thước của phần tử. Nếu bạn muốn tạo phần tử
pill (hình viên thuốc), chúng ta sẽ set thuộc tính border-radius giá trị bằng 1 nửa chiều cao của phần tử. Nếu chiều cao không xác định, chọn một số giá trị lớn tùy ý (ví dụ: 99em). .circle {
background: #456BD9;
border: 0.1875em solid #0F1C3F;
border-radius: 50%;
box-shadow: 0.375em 0.375em 0 0 rgba(15, 28, 63, 0.125);
height: 5em;
width: 5em;
}
SVGCác SVG có thể bao gồm một phần tử <circle />, có thể được style tương tự như bất kỳ cách nào khác. Chúng được hỗ trợ rất tốt và thực hiện để animate, nhưng chúng đòi hỏi nhiều markup hơn các kỹ thuật khác. Để ngăn việc cắt hình ảnh trực quan, hãy đảm bảo bán kính hình tròn (cộng với một nửa chiều
rộng của nó, nếu có) nhỏ hơn một chút so với viewBox SVG. .circle {
fill: #456BD9;
stroke: #0F1C3F;
stroke-width: 0.1875em;
}
Clip PathĐường dẫn clip là một kỹ thuật mới hơn. Hỗ trợ là tốt nhưng ít nhất quán. Clip Path không ảnh hưởng đến bố cục yếu tố, có nghĩa là chúng sẽ không ảnh hưởng đến border và có khả năng sẽ ẩn box-shadow bên ngoài. .circle {
background: #456BD9;
clip-path: circle(50%);
height: 5em;
width: 5em;
}
Radial GradientChúng ta có thể sử dụng background-image và radial-gradient để lấp đầy trực quan một phần tử bằng một vòng tròn. Bất kỳ nội dung nào cũng sẽ nằm trên cùng của hình dạng đó, nhưng
bố cục của nó sẽ không bị ảnh hưởng. Đây là kỹ thuật yêu thích ít nhất của tôi vì các cạnh của hình tròn có thể xuất hiện lởm chởm hoặc mờ tùy theo trình duyệt, nhưng nó có thể phù hợp với các điểm nhấn nền tinh tế. .circle {
background-image: radial-gradient(circle, #456BD9, #456BD9 66%, transparent 66%);
height: 5em;
width: 5em;
}
Kết luậnQua bài viết này mình đã giúp các bạn tìm hiểu các cách tạo hình tròn bằng CSS. Mình hy vọng nó sẽ có ích cho bạn. Bài viết tham khảo: CSS Circles All rights reserved Sử dụng CSS để vẽ các hìnhCSS cung cấp nhiều tính năng cho phép các lập trình viên có thể vẽ được nhiều hình khác nhau. Bài viết này sẽ hướng dẫn bạn cách tạo các hình thông qua các ví dụ cụ thể: Hình Vuông và Hình Chữ NhậtViệc tạo ra 2 loại hình này không quá khó, tuy nhiên tôi vẫn muốn liệt kê ra đây để các bạn tham khảo: div#my-div {
width: 50px;
height: 50px;
background: orange;
}
Kết quả: Hình TrònThông thường khi phải tạo ra hình tròn trên trang bạn sẽ nghĩ tới việc phải sử dụng hình ảnh
thay vì có thể dùng CSS. Điều này chỉ đúng với CSS2 với CSS3 chúng ta có thể sử dụng thuộc tính border-radius để có thể tạo hình tròn mà hoàn toàn không cần phải dùng tới hình ảnh. Hãy xem ví dụ sau: div#my-div {
width: 50px;
height: 50px;
background: red;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
--border-radius: 25px;
border-radius: 25px;
}
Khi sử dụng thuộc tính border-radius chúng ta cần thêm vào các tiền tố tương ứng với các trình duyệt khác nhau. Ở đây chúng ta cần tạo một hình vuông và sau đó sử dụng border-radius để uốn cong thành hình tròn. Giá trị của thuộc tính này cần phải bằng 1/2 giá trị của
chiều dài và chiều rộng của thẻ div tức là bằng 50px/2 = 25px. Kết quả như sau: Hình Ô-vanHình ô-van cũng được tạo ra tương tự như hình tròn tuy nhiên thẻ div ở ngoài sẽ là hình chữ nhật thay vì là hình vuông. div#my-div {
width: 150px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
Kết quả như sau: Hình Tam Giác
Hình tam giác được tạo ra khi chúng ta sử dụng kết hợp 3 thuộc tính border-left, border-right và border-bottom để tạo đường bao viền trái, phải và đáy qua đó tạo nên hình tam giác. div#my-div {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
Ở trên bạn chú ý chúng ta để thẻ <div> có chiều dài và chiều rộng đều là 0. Hình Kim CươngĐể tạo hình kim cương trước tiên chúng ta tạo một hình tam giác
sử dụng đoạn code sau: #my-div {
width: 0;
height: 0;
border: 30px solid transparent;
border-bottom-color: red;
position: relative;
top: -30px;
}
Đây chính là hình kim cương được tạo thành từ CSS3 Và tiếp theo chúng ta hoàn thiện phần hình tam giác còn lại sử dụng bộ chọn :after trong CSS2: #my-div:after {
content: '';
position: absolute;
left: -30px;
top: 30px;
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: red;
}
Kết quả cuối cùng chúng ta tạo được hình Ô-van như sau: | 
