Giải thích về hình dạng CSS: Cách vẽ hình tròn, hình tam giác và nhiều thứ khác bằng cách sử dụng CSS thuần túy – css vẽ vòng tròn xung quanh biểu tượng

Trước khi chúng ta bắt đầu. Nếu bạn muốn có nhiều nội dung miễn phí hơn nhưng ở dạng video. Đừng bỏ lỡ kênh Youtube của tôi, nơi tôi xuất bản các video hàng tuần về mã hóa FrontEnd. https://www.youtube.com/user/Weibenfalk ———- Bạn là người mới làm quen với phát triển web và CSS? Bạn đã bao giờ tự hỏi làm thế nào mà những hình dạng đẹp đẽ đó được tạo ra?

Bạn đang xem: < font style = "vertical-align: inherit;"> css vẽ vòng tròn xung quanh biểu tượng

Trước khi chúng ta bắt đầu. Nếu bạn muốn có nhiều nội dung miễn phí hơn nhưng ở dạng video. Đừng bỏ lỡ kênh Youtube của tôi, nơi tôi xuất bản các video hàng tuần về mã hóa FrontEnd.

https://www.youtube.com/user/Weibenfalk

———-

Bạn là người mới làm quen với phát triển web và CSS? Bạn đã bao giờ tự hỏi làm thế nào những hình dạng đẹp đẽ đó được tạo ra mà bạn nhìn thấy trên internet? Không còn thắc mắc nữa. Bạn đã đến đúng nơi.

Dưới đây, tôi sẽ giải thích những điều cơ bản về tạo hình dạng 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 bao gồm 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 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 dạng 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, chuyển đổi và các phần tử giả như : before :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-ngoài clip-path. Tôi cũng sẽ viết về chúng bên dưới.

Hình dạng CSS – 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 xem xét một vài trong số chúng.

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ễ đạ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 đó, nó chỉ là vấn đề cung cấp cho phần tử một màu nền. 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ử.

  # square {
    nền: lightblue;
    chiều rộng: 100px;
    chiều cao: 100px;
}  

square Hình vuông CSS

Vòng kết nối

Việc tạo vòng kết nối gần như dễ dàng. Để 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 kết nối. 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.

  # circle {
    nền: lightblue;
    bán kính biên giới: 50%;
    chiều rộng: 100px;
    chiều cao: 100px;
}  

circle Vò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 thiết lập 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 tế 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à đường chéo 45 độ đối 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 thành trong suốt, nó sẽ có dạng một hình tam giác.

Xem Thêm  Xử lý các lỗi cụ thể trong JavaScript (nghĩ rằng ngoại lệ) - loại ngoại lệ bắt javascript

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

  # tam giác {
    chiều rộng: 0;
    chiều cao: 0;
    border-left: 40px solid trong suốt;
    border-right: 40px solid trong suốt;
    border-bottom: màu xanh lam đặc 80px;
}  

tam giác Hình tam giác CSS

Nếu bạn muốn có hình tam giác / mũi tên trỏ theo hướng khác Bạn có thể thay đổi các giá trị đường viền tương ứng với mặt 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ự đẹp mắt.

  #triangle {
     chiều rộng: 0;
     chiều cao: 0;
     border-top: 40px solid trong suốt;
     border-right: lightblue rắn 80px;
     border-bottom: 40px solid trong suốt;
 }  

tam giác2 Mộ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 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 bộ chọn: after và: before pseudo. Điều này nằm ngoài phạm vi của bài viết này mặc dù mục đích của tôi là đề cập đến những điều cơ bản để giúp bạn tiếp tục.

Bất lợi

Có một bất lợi 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 bọc hình dạng của bạn. Một div HTML thông thường với 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ẽ tự chảy xung quanh div (là hình vuông hoặc hình chữ nhật).

Dưới đây là hình minh họa cho thấy hình tam giác và cách dòng chữ.

textflow-bad

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

CSS Shapes – Theo cách khác

Ngày nay, chúng ta có một thuộc tính gọi là shape-ngoài để sử dụng trong CSS. Thuộc tính này cho phép bạn xác định một hình dạng mà văn bản sẽ bao bọc / 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:

inset ()
circle ()
ellipse ()
polygon ()

Đây là 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 bằng cách đó theo cách tương tự, nhưng nó sẽ không để văn bản quấn quanh hình dạng của bạn như hình dạng bên ngoài đã làm.

Phần tử mà chúng tôi sẽ áp dụng hình dạng với tài sản hình dạng bên ngoài 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 cần biết!

Bạn có thể đọc thêm về lý do tại sao tại đây . Dưới đây cũng là văn bản mà tôi đã lấy từ liên kết được cung cấp tới developer.mozilla.org.

Thuộc tính shape-external đượ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).

inset ()

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

Bạn có thể chỉ định độ lệch giống nhau cho cả bốn hướng như sau: inset (20px). Hoặc có thể đặt riêng cho từng hướng: inset ( 20px 5px 30px 10px) .

Xem Thêm  Cách tốt hơn để lấy thời gian tính bằng mili giây trong javascript? - js lấy thời gian hiện tại mili giây

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

Hãy xem ví dụ mã bên dưới. Tôi đã chỉ định các giá trị chèn 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 nơi thảo luận, bạn có thể bỏ qua bằng cách 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.

  #square {
     float: trái;
     chiều rộng: 100px;
     chiều cao: 100px;
     shape-ngoài: inset (20px 5px 30px 10px);
     nền: lightblue;
 }  

inset Văn bản được bù đắp bởi các giá trị được 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 () một giá trị thứ hai chỉ định bán kính đường viền của phần chèn. Như bên dưới:

  #square {
     float: trái;
     chiều rộng: 100px;
     chiều cao: 100px;
     shape-ngoài: inset (20px 5px 30px 10px tròn 50px);
     nền: lightblue;
 }  

inset2 border-radius được đặt thành 50px trên inset

circle ()

Trong phần này, một vòng tròn được tạo bằng cách sử dụng < thuộc tính strong> shape-ngoài . Bạn cũng phải áp dụng đường dẫn clip với thuộc tính tương ứng để vòng kết nối hiển thị.

Thuộc tính clip-path có thể có cùng giá trị với thuộc tính shape-ngoài để chúng tôi có thể tạo cho nó hình dạng hình tròn () chuẩn mà chúng tôi được sử dụng cho hình dạng bên ngoài . Ngoài ra, hãy 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.

  # circle {
    float: trái;
    chiều rộng: 300px;
    chiều cao: 300px;
    lề: 20px;
    shape-ngoài: circle ();
    clip-path: circle ();
    nền: lightblue;
} 

circle-shape-margin-1 Văn bản chảy xung quanh hình dạng!

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 là (300px). Nếu bạn muốn chỉ định một kích thước khác cho hình tròn, bạn có thể làm điều đó.

Vòng tròn () 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ụ dưới đây, 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 đi 30%. Lưu ý rằng từ “at” phải được sử dụng giữa các 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 đường dẫn clip. Thao tác này sẽ cắt vòng tròn làm đôi khi tôi di chuyển vị trí về số không.

  #circle {
      float: trái;
      chiều rộng: 150px;
      chiều cao: 150px;
      lề: 20px;
      hình dạng bên ngoài: hình tròn (50% ở 30%);
      clip-path: circle (50% ở 0%);
      nền: lightblue;
    }  

circle2

ellipse ()

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ư sau: ellipse (25px 50px).

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

  #ellipse {
      float: trái;
      chiều rộng: 150px;
      chiều cao: 150px;
      lề: 20px;
      hình dạng bên ngoài: hình elip (20% 50%);
      clip-path: ellipse (20% 50%);
      nền: lightblue;
    }  

ellipse

polygon ()

Đa giác là một hình có các đỉnh / tọa độ khác nhau được xác định. Dưới đây tôi tạo một 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”.

  # polygon {
      float: trái;
      chiều rộng: 150px;
      chiều cao: 150px;
      lề: 0 20px;
      shape-ngoài: polygon (
        0 0,
        100% 0,
        100% 20%,
        60% 20%,
        60% 100%,
        40% 100%,
        40% 20%,
        0 20%
      );
      clip-path: polygon (
        0 0,
        100% 0,
        100% 20%,
        60% 20%,
        60% 100%,
        40% 100%,
        40% 20%,
        0 20%
      );
      nền: lightblue;
    }  

polygon_t

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 dạng của mình. Như mặt trăng tròn xinh đẹp dưới đây.

Xem Thêm  Thay thế các ký tự trong một chuỗi bằng Python - thay thế chuỗi trong python

Đây là hình ảnh .png có nền trong suốt.

moon

  & lt; img src = "src / moon.png" id = "moon" / & gt;  
  # moon {
      float: trái;
      chiều rộng: 150px;
      chiều cao: 150px;
      shape-ngoài: url ("./ src / moon.png");
    }  

moon2

Vậy là xong! Cảm ơn bạn đã đọc.

Giới thiệu 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 bài 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 trên React và Gatsby. Vui lòng ghé thăm tôi theo các liên kết sau:

Twitter – @weibenfalk ,
Weibenfalk trên Youtube ,
Weibenfalk Trang web các khóa học .


Xem thêm những thông tin liên quan đến chủ đề css vẽ vòng tròn xung quanh biểu tượng

Crazy css|| Background Design Animation pure#css #html #cssproject #vipcoading2022 #backgroundeffect

alt

  • Tác giả: VIP COADING 2022
  • Ngày đăng: 2022-03-26
  • Đánh giá: 4 ⭐ ( 3435 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Craeting Background Design Animation effect pure css…

    Only css…

    Source code (:-

    /*** Only HTML CSS NO JAVASCRIPT ****/

    ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤

    It’s not difficult, it’s very easy please try to create itself with the help of this video……

    how to create Loading animation :- https://youtube.com/shorts/ba3isVFX1YU?feature=share

    Moving ball animation :- https://youtu.be/Lc9vj92j3XI

    How to create Brick :- https://youtube.com/shorts/g9JG6ZTBSu8

    How to create Gradient background :- https://youtu.be/_ZssXGufsk0

    How to create a Circle :- https://youtu.be/iRIHx4N8ufY

    Don’t forget to subscribe Please support🙏🙏

Văn bản bao quanh một vòng tròn trong GIMP 2.10

  • Tác giả: daviesmediadesign.com
  • Đánh giá: 3 ⭐ ( 1960 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn GIMP 2019 này, tôi chỉ cho bạn cách bọc văn bản của bạn xung quanh một vòng tròn (tạo văn bản vòng tròn) bằng một kỹ thuật dễ dàng và hiệu quả.

Tổng hợp hiệu ứng vòng tròn với CSS3 Transitions

  • Tác giả: www.thuthuatweb.net
  • Đánh giá: 5 ⭐ ( 5274 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết kế web,Hướng dẫn làm Blog, Web

Tạo hiệu ứng vòng tròn cực đẹp với CSS3 Transitions

  • Tác giả: sharecode.vn
  • Đánh giá: 4 ⭐ ( 2051 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày hôm nay mình sẽ chia sẻ cho các bạn những hiệu ứng vòng tròn (Circle Hover Effects) với CSS transitions và 3D rotations.

Định vị các biểu tượng vào vòng tròn

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 2935 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Giải pháp năm 2020 Đây là một giải pháp hiện đại hơn mà tôi sử dụng…

Vẽ vòng tròn chỉ bằng css

  • Tác giả: vi.bannikherafarm.com
  • Đánh giá: 4 ⭐ ( 9329 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có thể vẽ vòng tròn chỉ bằng css có thể hoạt động trên hầu hết các trình duyệt (IE, Mozilla, Safari) không?

Hướng dẫn tạo hình tròn trong CSS

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 6211 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 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…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình