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
  

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
  

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

  
    Title of the document
  
  
    
1
  

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
  

Đượ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[]