Làm cách nào để tạo dấu sao bằng HTML và CSS?

Ngày nay, các công cụ xếp hạng sao được nhìn thấy trên tất cả các loại ứng dụng và trang web. Ai biết được — tại một thời điểm, bạn có thể được yêu cầu xây dựng một cách nhanh chóng để thu thập phản hồi của người dùng

Dưới đây là một cách để đạt được hiệu ứng xếp hạng sao bằng CSS thuần túy. Bạn có thể lướt qua thành phẩm bên dưới

Để hiển thị dấu sao trong văn bản của trang web, bạn cần sử dụng tham chiếu thực thể ký tự có liên quan. Điều này là do ngôi sao là một ký tự đặc biệt. Bạn không thể chỉ nhập dấu sao vào bàn phím. Chắc chắn, bạn có thể sao chép và dán từ một tài liệu khác nhưng đó không phải là một ý tưởng hay (thêm về điều này bên dưới)

Bạn có thể sử dụng tham chiếu thực thể ký tự để tạo ngôi sao đen hoặc sao trắng. Bạn có thể sử dụng số thực thể hoặc tên của nó

Số thực thể HTML

Đây là cách bạn sử dụng số thực thể HTML để hiển thị dấu sao trên trang web

Tên thực thể HTML

Đây là cách bạn sử dụng tên thực thể HTML

Thêm kiểu

Bạn có thể thêm phong cách cho ngôi sao của mình để làm cho ngôi sao nổi bật hơn. Có thể thêm các kiểu bằng cách sử dụng Cascading Style Sheets (CSS)

Trong ví dụ này, chúng tôi sử dụng thẻ

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

Cảnh báo về Sao chép/Dán

Lưu ý rằng bạn có thể muốn "sao chép và dán" một dấu sao từ một nguồn khác (ví dụ: tài liệu Word hoặc PDF) vào blog hoặc trang web của mình, nhưng điều đó thường không phải là một ý kiến ​​hay. Điều này có thể dẫn đến việc ngôi sao không xuất hiện chính xác cho người dùng của bạn

Do đó, bạn phải luôn sử dụng một trong các thực thể HTML trên trang này để đảm bảo rằng dấu sao xuất hiện chính xác cho người dùng của bạn

Giới thiệu về thực thể HTML

Các thực thể HTML được sử dụng trong HTML khi bạn cần hiển thị một ký tự đặc biệt trên trang web. Đây thường là những ký tự hoặc biểu tượng không thể dễ dàng gõ vào bàn phím

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 được sử dụng

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 lên nhau bằng cách 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);
}

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

.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à HTML

<div class="four-pointed-star"></div>

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 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

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

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

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

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

<div class="five-pointed-star"></div>

và mã CSS

.five-pointed-star {
 --star-color:orange;
 margin:1em auto;
 font-size:10em;
 position: relative;
 display: block;
 width: 0px;
 height: 0px;
 border-right: 1em solid transparent;
 border-bottom: 0.7em solid var(--star-color);
 border-left: 1em solid transparent;
 transform: rotate(35deg);
}
.five-pointed-star:before {
 border-bottom: 0.8em solid var(--star-color);
 border-left: 0.3em solid transparent;
 border-right: 0.3em solid transparent;
 position: absolute;
 height: 0;
 width: 0;
 top: -0.45em;
 left: -0.65em;
 display: block;
 content:"";
 transform: rotate(-35deg);
}
.five-pointed-star:after {
 position: absolute;
 display: block;
 top: 0.03em;
 left: -1.05em;
 width: 0;
 height: 0;
 border-right: 1em solid transparent;
 border-bottom: 0.7em solid var(--star-color);
 border-left: 1em solid transparent;
 transform: rotate(-70deg);
 content:"";
}

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

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

Trong trường hợp của chúng tôi, chúng tôi có 3 hình tam giác và chúng có 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);
}

Bạn có thể thử nghiệm với mã CSS tại đây

Xem 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 ________ 15 có chiều cao bằng ________ 16

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

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

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

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

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

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

<div class="five-pointed-star"></div>

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

<div class="five-pointed-star"></div>

Đố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

<div class="five-pointed-star"></div>

Để 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);
}

Đây là Codepen để thử với ngôi sao CSS này

Xem 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

Làm cách nào để vẽ ngôi sao bằng HTML và CSS?

Xếp hạng 5 sao là gì?

Làm cách nào để đặt một biểu tượng trong HTML?