Hướng dẫn circle css - vòng tròn css

Đã đăng vào thg 10 21, 2019 2:31 SA 3 phút đọc 3 phút đọc

Giới thiệu

Gầ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 radius

Kỹ thuật phổ biến nhất là làm tròn tất cả các góc bằng cách set

.circle {
  background: #456BD9;
  clip-path: circle(50%);
  height: 5em;
  width: 5em;
}

.circle {
  background: #456BD9;
  clip-path: circle(50%);
  height: 5em;
  width: 5em;
}

.circle {
  background: #456BD9;
  clip-path: circle(50%);
  height: 5em;
  width: 5em;
}

.circle {
  background: #456BD9;
  clip-path: circle(50%);
  height: 5em;
  width: 5em;
}

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

.circle {
  background: #456BD9;
  clip-path: circle(50%);
  height: 5em;
  width: 5em;
}

.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;
}

SVG

Các SVG có thể bao gồm một phần tử

.circle {
  background: #456BD9;
  clip-path: circle(50%);
  height: 5em;
  width: 5em;
}

.circle {
  background: #456BD9;
  clip-path: circle(50%);
  height: 5em;
  width: 5em;
}

.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

.circle {
  background: #456BD9;
  clip-path: circle(50%);
  height: 5em;
  width: 5em;
}

.circle {
  background: #456BD9;
  clip-path: circle(50%);
  height: 5em;
  width: 5em;
}

.circle {
  background: #456BD9;
  clip-path: circle(50%);
  height: 5em;
  width: 5em;
}

Radial Gradient

Chúng ta có thể sử dụng

.circle {
  background-image: radial-gradient(circle, #456BD9, #456BD9 66%, transparent 66%);
  height: 5em;
  width: 5em;
}

.circle {
  background-image: radial-gradient(circle, #456BD9, #456BD9 66%, transparent 66%);
  height: 5em;
  width: 5em;
}

.circle {
  background-image: radial-gradient(circle, #456BD9, #456BD9 66%, transparent 66%);
  height: 5em;
  width: 5em;
}

Kết luận

Qua 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