Các đường viền màu vàng thực sự được đặt thành transparent
trong sản phẩm cuối cùng nên chúng không hiển thị. Chúng có màu vàng ở đây để hiển thị các đường viền trông như thế nào
Như đã nhận xét ở trên, câu trả lời này cho thấy ý tưởng đằng sau hình tam giác cơ bản
Div của chính nó
Kết hợp phần tử giả :before
giống như thế này
Cuối cùng, kết hợp phần tử giả :after
giống như thế này
Bây giờ, bạn chồng chính xác từng phần tử bằng cách sử dụng position: absolute;
và xoay với transform
nếu cần để có sản phẩm cuối cùng
CSS có khả năng tạo ra tất cả các loại hình dạng. Hình vuông và hình chữ nhật rất dễ dàng vì chúng là hình dạng tự nhiên của web. Thêm một width
và height
và bạn có hình chữ nhật có kích thước chính xác mà bạn cần. Thêm border-radius
và bạn có thể làm tròn hình đó, và bạn có thể biến những hình chữ nhật đó thành hình tròn và hình bầu dục
Chúng tôi cũng nhận được các phần tử giả ::before
và ::after
trong CSS, cho chúng tôi khả năng có thêm hai hình dạng mà chúng tôi có thể thêm vào phần tử ban đầu. Bằng cách khéo léo định vị, biến đổi và nhiều thủ thuật khác, chúng ta có thể tạo ra nhiều hình dạng trong CSS chỉ với một phần tử HTML duy nhất
Ngày nay, cách tốt nhất để bạn vẽ các hình dạng là SVG hoặc sử dụng clip-path
trong CSS, giống như SVG [và có thể tham chiếu SVG]. Ví dụ: hãy xem các bộ biểu tượng SVG này, trình chỉnh sửa clip-path
này và phần giới thiệu về CSS clipping này. Bài báo này được viết ban đầu trước khi một trong hai công nghệ này thực sự nắm giữ
Hình ngôi sao CSS có thể được tạo bằng cách sử dụng mã CSS rất cơ bản. Tạo hình ngôi sao CSS rất hữu ích cho một số mục đích từ tạo hệ thống xếp hạng sao CSS, đến bộ chia đoạn, trang trí danh sách dấu đầu dòng, biểu tượng ngôi sao, v.v.
Trong bài viết ngắn này, tôi sẽ chỉ cho bạn tất cả các công cụ và mã cho trình tạo hình sao CSS của riêng bạn
Biểu Tượng Ngôi Sao ★✬✯
Có nhiều hình được gọi là hình ngôi sao. Chúng có số lượng mẹo [điểm] khác nhau, chúng trống hoặc đầy, tròn hoặc nhọn, v.v. Mỗi người trong số họ có thể có một ý nghĩa khác nhau
Thông thường trên các trang web, biểu tượng ngôi sao được liên kết với thứ gì đó có giá trị cao hoặc hầu hết thời gian chúng được sử dụng để xếp hạng hoặc đánh giá. Hệ thống xếp hạng sao CSS có ưu điểm là trọng lượng rất nhẹ – cải thiện thời gian tải và hiệu suất tổng thể của trang sử dụng hệ thống này
Làm cách nào để bạn thêm biểu tượng ngôi sao trong CSS?
CSS ngôi sao bốn cánh
Để tạo hình ngôi sao CSS 4 điểm này, bạn chỉ cần chồng 2 hình vuông hơi dẹt bằng cách sử dụng phép biến đổi CSS skew[]
. Khi chồng lên nhau, một cái được xoay 45deg
và cái còn lại xoay -45deg
Đây là HTML
và mã CSS
.four-pointed-star{ position:relative; margin:1em auto; width:1em; font-size:12em; } .four-pointed-star:before{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[-45deg] skewX[22.5deg] skewY[22.5deg]; } .four-pointed-star:after{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[45deg] skewX[22.5deg] skewY[22.5deg]; }
Đây là bản xem trước trực tiếp
Xem cây bút
Sao CSS. Ngôi sao 4 cánh ✦ của Ion Emil Negoita [@inegoita]
trên CodePen. 0
Hoặc xem ý chính Github này
Để thay đổi màu của ngôi sao, sửa đổi màu background
cho 2 lớp. Bạn có thể thay đổi kích thước cho ngôi sao CSS này bằng cách đặt một
.four-pointed-star{ position:relative; margin:1em auto; width:1em; font-size:12em; } .four-pointed-star:before{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[-45deg] skewX[22.5deg] skewY[22.5deg]; } .four-pointed-star:after{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[45deg] skewX[22.5deg] skewY[22.5deg]; }0 khác cho lớp CSS
.four-pointed-star{ position:relative; margin:1em auto; width:1em; font-size:12em; } .four-pointed-star:before{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[-45deg] skewX[22.5deg] skewY[22.5deg]; } .four-pointed-star:after{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[45deg] skewX[22.5deg] skewY[22.5deg]; }1
Ngôi sao CSS năm cánh
Hãy xem cách tạo hình ngôi sao CSS 5 cánh cổ điển
Về cơ bản, chúng ta cần chồng lên 3 hình tam giác. Hình tam giác CSS được tạo bằng cách sử dụng kết hợp các đường viền có màu và trong suốt
Trong một trong những bài viết cũ của tôi, tôi đã đề cập đến cách tạo các hình tam giác CSS, vì vậy hãy xem nhanh nếu bạn không biết kỹ thuật này
Đây là mã HTML cho ngôi sao CSS 5 cánh này
và mã CSS
________số 8_______Bạn có thể thắc mắc về thỏa thuận với bất động sản đó là gì
.four-pointed-star{ position:relative; margin:1em auto; width:1em; font-size:12em; } .four-pointed-star:before{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[-45deg] skewX[22.5deg] skewY[22.5deg]; } .four-pointed-star:after{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[45deg] skewX[22.5deg] skewY[22.5deg]; }2. Nó không phải là thuộc tính CSS tiêu chuẩn
Các thuộc tính bắt đầu bằng
.four-pointed-star{ position:relative; margin:1em auto; width:1em; font-size:12em; } .four-pointed-star:before{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[-45deg] skewX[22.5deg] skewY[22.5deg]; } .four-pointed-star:after{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[45deg] skewX[22.5deg] skewY[22.5deg]; }3 [dấu trừ kép CSS] là các biến CSS. Bạn có thể xác định các giá trị biến giống như các thuộc tính CSS thông thường, sau đó sử dụng lại chúng trong mã CSS của mình. Điều này có lợi thế là bạn sẽ chỉ phải thay đổi giá trị ở một nơi và nó sẽ được áp dụng ở mọi nơi mà biến được sử dụng
Trong trường hợp của chúng ta, chúng ta có 3 hình tam giác và chúng lấy màu từ biến
.four-pointed-star{ position:relative; margin:1em auto; width:1em; font-size:12em; } .four-pointed-star:before{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[-45deg] skewX[22.5deg] skewY[22.5deg]; } .four-pointed-star:after{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[45deg] skewX[22.5deg] skewY[22.5deg]; }2 này. Vì vậy, đó là nơi bạn thực sự có thể thay đổi màu sắc của hình dạng ngôi sao CSS
Bạn có thể thử nghiệm với mã CSS tại đây
Xem cây bút
Sao CSS. Ngôi sao 5 cánh ★ của Ion Emil Negoita [@inegoita]
trên CodePen. 0
hoặc sao chép/dán mã sao CSS từ ý chính Github này
Ngôi sao sáu cánh trong CSS
Chúng ta đã thấy ngôi sao bốn cánh, ngôi sao năm cánh và bây giờ hãy xem cách tạo ngôi sao sáu cánh bằng CSS
Ngôi sao sáu cánh hay còn gọi là hình lục giác hay ngôi sao David được tạo thành từ hai tam giác đều chồng lên nhau [ba cạnh bằng nhau]. Nếu muốn, bạn có thể vẽ cái này trong Photoshop và bạn có thể tìm hiểu ở đây cách tạo một hình tam giác trong Photoshop. Tuy nhiên, bạn ở đây để xem cách tạo một quẻ bằng CSS
Chúng ta sẽ cần một chút toán học. Trên thực tế, bạn sẽ không bởi vì tôi đã làm điều đó cho bạn. Chúng ta sẽ vẽ lại tam giác đều CSS bằng cách sử dụng các đường viền và chúng ta cần tính xem tam giác đó phải cao bao nhiêu để làm cho nó bằng nhau
Về cơ bản, một tam giác đều có độ dài cạnh bằng
.four-pointed-star{ position:relative; margin:1em auto; width:1em; font-size:12em; } .four-pointed-star:before{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[-45deg] skewX[22.5deg] skewY[22.5deg]; } .four-pointed-star:after{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[45deg] skewX[22.5deg] skewY[22.5deg]; }5 có chiều cao bằng
.four-pointed-star{ position:relative; margin:1em auto; width:1em; font-size:12em; } .four-pointed-star:before{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[-45deg] skewX[22.5deg] skewY[22.5deg]; } .four-pointed-star:after{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[45deg] skewX[22.5deg] skewY[22.5deg]; }6
Nhưng làm cách nào để chúng ta đặt các phép tính trong CSS. Kiểm tra mã dưới đây và sau đó tôi sẽ giải thích
Mã HTML
và mã CSS
.six-pointed-star{ --star-color:#0038b8; --sqrt-3:1.73205080757; margin: 0 auto; font-size:10em; width: 0; height: 0; position:relative; border-left: 1em solid transparent; border-right: 1em solid transparent; border-bottom: calc[ 1em * var[--sqrt-3] ] solid var[--star-color]; } .six-pointed-star:after{ content:""; position:absolute; width: 0; height: 0; left:-1em; top:calc[ 1em * var[--sqrt-3] / 3 ]; border-left: 1em solid transparent; border-right: 1em solid transparent; border-top: calc[ 1em * var[--sqrt-3] ] solid var[--star-color]; }
Như bạn có thể thấy, chúng tôi đang sử dụng lại các biến CSS. Ngoài ra, chúng tôi đang sử dụng
.four-pointed-star{ position:relative; margin:1em auto; width:1em; font-size:12em; } .four-pointed-star:before{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[-45deg] skewX[22.5deg] skewY[22.5deg]; } .four-pointed-star:after{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[45deg] skewX[22.5deg] skewY[22.5deg]; }7 để tính toán CSS. Với
.four-pointed-star{ position:relative; margin:1em auto; width:1em; font-size:12em; } .four-pointed-star:before{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[-45deg] skewX[22.5deg] skewY[22.5deg]; } .four-pointed-star:after{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[45deg] skewX[22.5deg] skewY[22.5deg]; }7, bạn có thể thực hiện các phép tính bằng cách sử dụng các đơn vị khác nhau trong CSS [px, em, rem], thậm chí bạn có thể sử dụng các biến và thậm chí có một số hàm toán học mà bạn có thể sử dụng
Chúng ta cần sử dụng căn bậc hai của 3, tiếc là không có hàm CSS để tính căn bậc hai, nhưng chúng ta có thể nhúng giá trị cho căn bậc hai của 3 dưới dạng một biến
Sau đó, chúng tôi sử dụng biến này để tính chiều cao của tam giác đều có cạnh dài
.four-pointed-star{ position:relative; margin:1em auto; width:1em; font-size:12em; } .four-pointed-star:before{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[-45deg] skewX[22.5deg] skewY[22.5deg]; } .four-pointed-star:after{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[45deg] skewX[22.5deg] skewY[22.5deg]; }9 như thế này
0. Để đơn giản hóa thay vì chia
.four-pointed-star{ position:relative; margin:1em auto; width:1em; font-size:12em; } .four-pointed-star:before{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[-45deg] skewX[22.5deg] skewY[22.5deg]; } .four-pointed-star:after{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[45deg] skewX[22.5deg] skewY[22.5deg]; }9 cho 2, tôi đang sử dụng
2 trực tiếp
Đối với hình tam giác chồng lên nhau lộn ngược, chúng ta phải bù nó bằng một phần ba chiều cao của hình tam giác như thế này
3
Để sửa đổi kích thước của ngôi sao sáu cánh, chỉ cần thay đổi kích thước phông chữ. Đối với màu sắc, bạn có thể điều chỉnh nếu bằng cách thay đổi biến
.four-pointed-star{ position:relative; margin:1em auto; width:1em; font-size:12em; } .four-pointed-star:before{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[-45deg] skewX[22.5deg] skewY[22.5deg]; } .four-pointed-star:after{ content:""; position:absolute; background:red; width:1em; height:1.15em; transform:rotate[45deg] skewX[22.5deg] skewY[22.5deg]; }2
Đây là Codepen để thử với ngôi sao CSS này
Xem cây bút
Sao CSS. Ngôi sao 6 cánh ✶ của Ion Emil Negoita [@inegoita]
trên CodePen. 0
Và ý chính của Github
Tóm lại là
Nếu bạn cần thêm dấu sao hoặc vào mã HTML của mình, thì bây giờ bạn đã biết cách tạo dấu sao CSS. Nếu bạn có bất kỳ câu hỏi hoặc mẹo bổ sung nào về cách tạo các loại sao khác trong CSS, hãy vui vẻ và gửi cho tôi nhận xét bên dưới