Cách tạo hình ngôi sao trong HTML

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

.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

và mã CSS

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

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

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

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

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

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

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

Mã cho biểu tượng ngôi sao trong HTML là gì?

Làm cách nào để sử dụng dấu hoa thị trong HTML?