Vòng tròn HTML

Để vẽ một vòng tròn trong trang HTML, hãy sử dụng SVG hoặc canvas. Bạn cũng có thể vẽ nó bằng CSS, với thuộc tính bán kính đường viền

Ví dụ

Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách vẽ hình tròn trong HTML

Bản thử trực tiếp

---

Thêm một vòng tròn xung quanh một số có thể dễ dàng thực hiện bằng CSS. Điều này có thể được thực hiện bằng cách sử dụng thuộc tính bán kính đường viền

Trong đoạn mã này, bạn cũng có thể tìm cách thêm một vòng tròn xung quanh các số có một đến bốn chữ số

Bây giờ, chúng tôi sẽ hiển thị quy trình từng bước

• Tạo một

  với một tên lớp "vòng tròn" bên trong

• Đặt một số bên trong đó

  .

  
    Title of the document
  
  
    
1
  

• Đặt bán kính đường viền thành "50%"
• Chỉ định chiều rộng và chiều cao của phần tử
• Tạo kiểu cho lớp bằng các thuộc tính nền, đường viền và màu sắc
• Căn giữa số bằng cách sử dụng giá trị "căn giữa" của thuộc tính căn chỉnh văn bản
• Chỉ định phông chữ của số

.circle {
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 10px;
  background: #fff;
  border: 3px solid #000;
  color: #000;
  text-align: center;
  font: 32px Arial, sans-serif;
}

Bây giờ chúng ta có thể xem ví dụ đầy đủ

  
    Title of the document
    
  
  
    
1
  

Tiếp theo, chúng tôi sẽ hiển thị một ví dụ trong đó chúng tôi sử dụng các vòng tròn xung quanh các số có một đến bốn chữ số. Ví dụ này có thể được sử dụng cho bất kỳ số lượng văn bản nào và bất kỳ kích thước vòng tròn nào

Ở đây, chúng ta sẽ sử dụng thuộc tính line-height. Lưu ý rằng thuộc tính width và line-height phải có cùng giá trị

  
    Title of the document
    
  
  
    
1
    
100
    
10000
    
1000000
  

Trong ví dụ cuối cùng của chúng tôi, chúng tôi sử dụng các tiền tố -moz- và -webkit- với thuộc tính bán kính đường viền. Ở đây, chúng tôi cũng sử dụng thuộc tính hiển thị được đặt thành "khối nội tuyến" để biểu thị phần tử dưới dạng bộ chứa khối cấp độ nội tuyến

Có nhiều kỹ thuật được sử dụng để tạo ra một vòng tròn. Trong đoạn mã của chúng tôi, chúng tôi sẽ minh họa một số ví dụ với thuộc tính CSS border-radius, cũng như với HTMLand SVGelements

Cách phổ biến nhất là sử dụng thuộc tính bán kính đường viền. Chúng ta chỉ cần đặt thuộc tính bán kính đường viền thành 50% trên phần tử cần thiết để tạo các góc cong

Như bạn đã nhận thấy, nó khá dễ dàng. Bây giờ hãy bắt đầu với việc tạo HTML

• Sử dụng hai

  các phần tử và thêm các lớp cho chúng

• Đặt bán kính đường viền thành 50% cho “. circleBase”
• Đặt riêng các thuộc tính chiều rộng, chiều cao, nền và đường viền cho các lớp "circle1" và "circle2"

.circleBase {
  border-radius: 50%;
}

.circle1 {
  width: 100px;
  height: 100px;
  background: #4bc475;
  border: 1px solid #000;
}

.circle2 {
  width: 150px;
  height: 150px;
  background: #a1a1a1;
  border: 1px solid #000;
}

Bây giờ bạn có thể xem ví dụ đầy đủ

  
    Title of the document
    
  
  
    
    
  

Kết quả

Phương pháp mà chúng tôi sử dụng trong ví dụ trên là phương pháp đơn giản nhất và có trình duyệt hỗ trợ tốt

Bây giờ, hãy xem một ví dụ, nơi chúng ta sử dụng các phần tử trong một

Ở đây, chúng tôi cũng chỉ định màn hình là “khối nội tuyến” và thêm thuộc tính căn chỉnh văn bản được đặt thành “trung tâm” vào

để sắp xếp các vòng tròn vào trung tâm

________số 8

Trong ví dụ tiếp theo của chúng tôi, chúng tôi tạo một vòng tròn

và đặt một văn bản bên trong nó

Ví dụ tạo vòng tròn có chữ bên trong

  
    Title of the document
    
  
  
    

      
Example of a circular div
    

  

Trong ví dụ sau, chúng tôi tạo một vòng kết nối phản hồi. Ở đây, chúng tôi đặt chiều rộng phần trăm và bán kính đường viền cho vùng chứa. Sau đó, chúng ta thêm một khối trống của padding-bottom vào. sau phần tử giả. Do đó, chúng ta có thể có kết quả tương tự khi tạo vùng chứa có chiều rộng và chiều cao bằng nhau

Dưới đây tôi sẽ giải thích những điều cơ bản về tạo hình bằng CSS. Có rất nhiều điều để nói với bạn về chủ đề này. Do đó, tôi sẽ không đề cập đến tất cả (không phải tất cả) các công cụ và hình dạng nhưng điều này sẽ cung cấp cho bạn ý tưởng cơ bản về cách các hình dạng được tạo bằng CSS

Một số hình dạng yêu cầu nhiều "sửa chữa và thủ thuật" hơn những hình dạng khác. Tạo hình bằng CSS thường là sự kết hợp của việc sử dụng chiều rộng, chiều cao, trên cùng, phải, trái, đường viền, dưới cùng, biến đổi và các phần tử giả như. trước và. sau đó. Chúng tôi cũng có các thuộc tính CSS hiện đại hơn để tạo các hình dạng như shape-outside và clip-path. Tôi cũng sẽ viết về chúng bên dưới

CSS Shapes - Cách cơ bản

Bằng cách sử dụng một số thủ thuật trong CSS, chúng tôi luôn có thể tạo các hình dạng cơ bản như hình vuông, hình tròn và hình tam giác với các thuộc tính CSS thông thường. Bây giờ chúng ta hãy nhìn vào một vài trong số họ

Hình vuông và hình chữ nhật

Hình vuông và hình chữ nhật có lẽ là những hình dạng dễ đạt được nhất. Theo mặc định, div luôn là hình vuông hoặc hình chữ nhật

Bạn đặt chiều rộng và chiều cao như trong đoạn mã dưới đây. Sau đó, vấn đề chỉ là tạo màu nền cho phần tử. Bạn có thể có bất kỳ thuộc tính nào khác mà bạn muốn trên phần tử

  
    Title of the document
  
  
    
1
  

0Một hình vuông CSS

vòng kết nối

Nó gần như dễ dàng để tạo một vòng kết nối. Để tạo một vòng tròn, chúng ta có thể đặt bán kính đường viền trên phần tử. Điều này sẽ tạo ra các góc cong trên phần tử

Nếu chúng tôi đặt nó thành 50%, nó sẽ tạo ra một vòng tròn. Nếu bạn đặt chiều rộng và chiều cao khác, thay vào đó, chúng tôi sẽ nhận được hình bầu dục

  
    Title of the document
  
  
    
1
  

1Vòng kết nối CSS

Hình tam giác

Hình tam giác phức tạp hơn một chút. Chúng ta phải đặt các đường viền trên phần tử để khớp với một hình tam giác. Bằng cách đặt chiều rộng và chiều cao thành 0 trên phần tử, chiều rộng thực của phần tử sẽ là chiều rộng của đường viền

Hãy nhớ rằng các cạnh đường viền trên một phần tử là các đường chéo 45 độ với nhau. Đó là lý do tại sao phương pháp này hoạt động để tạo ra một hình tam giác. Bằng cách đặt một trong các đường viền thành màu đồng nhất và các đường viền khác trong suốt, nó sẽ có dạng hình tam giác

Đường viền CSS có các cạnh góc cạnh

  
    Title of the document
  
  
    
1
  

2Tam giác CSS

Nếu bạn muốn có một hình tam giác/mũi tên chỉ theo hướng khác Bạn có thể thay đổi các giá trị đường viền tương ứng với phía bạn muốn hiển thị. Hoặc bạn có thể xoay phần tử bằng thuộc tính biến đổi nếu bạn muốn thực sự lạ mắt

  
    Title of the document
  
  
    
1
  

3Một tam giác CSS khác

Được rồi – đó là phần giới thiệu về các hình dạng cơ bản với CSS. Có thể có vô số hình dạng mà bạn có thể nghĩ ra để tạo ra. Đây chỉ là những nguyên tắc cơ bản, nhưng với một chút sáng tạo và quyết tâm, bạn có thể đạt được rất nhiều điều chỉ với các thuộc tính CSS cơ bản

Trong một số trường hợp, với các hình dạng nâng cao hơn, bạn cũng nên sử dụng. sau và. trước bộ chọn giả. Điều này nằm ngoài phạm vi của bài viết này mặc dù ý định của tôi là trình bày những điều cơ bản để giúp bạn tiếp tục

Điều bất lợi

Có một nhược điểm lớn với cách tiếp cận trên. Ví dụ: nếu bạn muốn văn bản của mình chạy xung quanh và bao quanh hình dạng của bạn. Một div HTML thông thường có nền và đường viền để tạo nên hình dạng sẽ không cho phép điều đó. Văn bản sẽ không thích ứng và chảy xung quanh hình dạng của bạn. Thay vào đó, nó sẽ chảy xung quanh chính div (là hình vuông hoặc hình chữ nhật)

Dưới đây là hình minh họa hiển thị hình tam giác và cách văn bản sẽ chảy

May mắn thay, chúng tôi có một số thuộc tính CSS hiện đại để sử dụng thay thế

Hình dạng CSS - Cách khác

Ngày nay chúng ta có một thuộc tính gọi là shape-outside để sử dụng trong CSS. Thuộc tính này cho phép bạn xác định hình dạng mà văn bản sẽ bao quanh/chảy xung quanh

Cùng với thuộc tính này, chúng ta có một số hình dạng cơ bản.

hình chữ nhật()
hình tròn()
hình elip()
hình đa giác()

Đây là một mẹo. Bạn cũng có thể sử dụng thuộc tính clip-path. Bạn có thể tạo hình dạng của mình theo cách tương tự, nhưng nó sẽ không để văn bản bao quanh hình dạng của bạn như hình dạng bên ngoài

Phần tử mà chúng ta sẽ áp dụng hình dạng với thuộc tính shape-outside phải được thả nổi. Nó cũng phải có chiều rộng và chiều cao xác định. Điều đó thực sự quan trọng để biết

Bạn có thể đọc thêm về lý do tại sao ở đây. Dưới đây cũng là một văn bản mà tôi đã lấy từ liên kết được cung cấp cho nhà phát triển. mozilla. tổ chức

Thuộc tính

  
    Title of the document
  
  
    
1
  

12 được chỉ định bằng cách sử dụng các giá trị từ danh sách bên dưới, xác định vùng float cho các phần tử float. Vùng float xác định hình dạng bao quanh nội dung nội tuyến (phần tử float)

chèn ()

Loại inset() có thể được sử dụng để tạo hình chữ nhật/hình vuông với phần bù tùy chọn cho văn bản gói. Nó cho phép bạn cung cấp các giá trị về mức độ bạn muốn văn bản gói của mình chồng lên hình dạng

Bạn có thể chỉ định phần bù giống nhau cho cả bốn hướng như thế này. hình nhỏ (20px). Hoặc có thể đặt riêng cho từng hướng. hình nhỏ (20px 5px 30px 10px)

Bạn cũng có thể sử dụng các đơn vị khác để đặt độ lệch, ví dụ: phần trăm. Các giá trị tương ứng như thế này. hình nhỏ (trên cùng bên phải dưới cùng bên trái)

Kiểm tra ví dụ mã dưới đây. Tôi đã chỉ định các giá trị chèn vào là 20px ở trên cùng, 5px ở bên phải, 30px ở dưới cùng và 10px ở bên trái. Thay vào đó, nếu bạn muốn văn bản của mình đi xung quanh hình vuông của mình, bạn hoàn toàn có thể bỏ qua việc sử dụng inset(). Thay vào đó, hãy đặt nền trên div của bạn và chỉ định kích thước như bình thường

  
    Title of the document
  
  
    
1
  

5Văn bản được bù đắp bởi các giá trị đã chỉ định. Trong trường hợp này là 20px ở trên cùng, 5px ở bên phải, 30px ở dưới cùng và 10 px ở bên trái

Cũng có thể cung cấp cho inset() giá trị thứ hai chỉ định bán kính đường viền của hình nhỏ. Giống như bên dưới

  
    Title of the document
  
  
    
1
  

6bán kính đường viền được đặt thành 50px trên hình nhỏ

khoanh tròn()

Trong cái này, một vòng tròn được tạo bằng thuộc tính shape-outside. Bạn cũng phải áp dụng clip-path với thuộc tính tương ứng để vòng tròn hiển thị

Thuộc tính clip-path có thể nhận cùng giá trị với thuộc tính shape-outside để chúng ta có thể đặt cho nó hình dạng circle() tiêu chuẩn mà chúng ta đã sử dụng cho shape-outside. Ngoài ra, lưu ý rằng tôi đã áp dụng lề 20px cho phần tử ở đây để tạo khoảng trống cho văn bản

  
    Title of the document
  
  
    
1
  

7Văn bản chạy quanh hình.

Trong ví dụ trên, tôi không chỉ định bán kính của hình tròn. Điều này là do tôi muốn nó lớn bằng div (300px). Nếu bạn muốn chỉ định kích thước khác cho vòng tròn, bạn có thể làm điều đó

circle() nhận hai giá trị. Giá trị đầu tiên là bán kính và giá trị thứ hai là vị trí. Các giá trị này sẽ chỉ định tâm của vòng tròn

Trong ví dụ bên dưới, tôi đã đặt bán kính thành 50%. Sau đó, tôi đã dịch chuyển tâm của vòng tròn 30%. Lưu ý rằng từ "tại" phải được sử dụng giữa giá trị bán kính và vị trí

Tôi cũng đã chỉ định một giá trị vị trí khác trên clip-path. Điều này sẽ cắt vòng tròn làm đôi khi tôi di chuyển vị trí về 0

  
    Title of the document
  
  
    
1
  

8

hình elip()

Hình elip hoạt động giống như hình tròn ngoại trừ việc chúng tạo ra hình bầu dục. Bạn có thể xác định cả giá trị X và giá trị Y, như thế này. hình elip(25px  50px)

Giống như một vòng tròn, nó cũng lấy một giá trị vị trí làm giá trị cuối cùng

  
    Title of the document
  
  
    
1
  

9

đa giác()

Đa giác là một hình có các đỉnh/tọa độ khác nhau được xác định. Bên dưới tôi tạo hình chữ "T" là chữ cái đầu tiên trong tên của tôi. Tôi bắt đầu từ tọa độ 0,0 và di chuyển từ trái sang phải để tạo hình chữ "T"

.circle {
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 10px;
  background: #fff;
  border: 3px solid #000;
  color: #000;
  text-align: center;
  font: 32px Arial, sans-serif;
}

0

Hình ảnh

Bạn cũng có thể sử dụng hình ảnh có nền trong suốt để tạo hình của mình. Như mặt trăng tròn xinh dưới đây

Đây là một. hình ảnh png với nền trong suốt

  
    Title of the document
  
  
    
1
  

10

  
    Title of the document
  
  
    
1

11

Và thế là xong. Cảm ơn bạn đã đọc.

Về tác giả của bài viết này

Tên tôi là Thomas Weibenfalk và tôi là nhà phát triển đến từ Thụy Điển. Tôi thường xuyên tạo các hướng dẫn miễn phí trên kênh Youtube của mình. Ngoài ra còn có một vài khóa học cao cấp về React và Gatsby. Hãy ghé thăm tôi trên các liên kết này

Twitter — @weibenfalk,
Weibenfalk on Youtube,
Weibenfalk Courses Website.

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Thomas Weibenfalk

Nhà phát triển và Nhà thiết kế ?‍? . js ?, Người tạo khóa học, giáo viên, doanh nhân và người bản địa kỹ thuật số

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu