HTML 五角星 -- CSS

最新推荐文章于 2021-12-27 10:07:58 发布
最新推荐文章于 2021-12-27 10:07:58 发布
阅读量883 收藏
点赞数 1
原文链接：https://blog.csdn.net/u011113654/article/details/55804609
版权

在HTML中显示五角星的方式方法有多种方法：

  1. 显示特殊字符或者使用字体图标的方式
  2. CSS 方式
  3. SVG
  4. canvas 绘制
关于 第一种 方式，不做介绍。接下来着重介绍 2, 3, 4 的方式实现。 
这篇文章要讲解的就是如何通过 CSS 的方式实现五角星。

对于 五角星，我们其实可以看作是 3 个三角形 通过旋转定位过后组合而成的。
五角星
这是组合出来的效果。我们可以在进行一次拆分：
1 2 3
可以看到上图的3个三角形通过定位就能组合成一个五角星了。
总结一下，通过 CSS 实现五角星需要的步骤：
  1. 三角形
  2. 需要3个三角形
  3. 旋转
  4. 定位

1.实现三角形

利用 CSS 的 border 属性来实现三角形。 
<div class="star-five"></div>
  
  

  
  

   
   
  1. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       .star-five {
      
      
    
     
     
  2. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           width: 0;
      
      
    
     
     
  3. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           height: 0;
      
      
    
     
     
  4. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           position: relative;
      
      
    
     
     
  5. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           border-bottom: 70px solid blue;
      
      
    
     
     
  6. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           border-left: 100px solid transparent;
      
      
    
     
     
  7. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           border-right: 100px solid transparent;
      
      
    
     
     
  8. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
           margin-top: 80px;
      
      
    
     
     
  9. 
     
     
    
      
      
    
     
     
    
     
     
    
      
      
    
       
       }
      
      
    
     
     

   
   
 这样就能实现一个下面这样的三角形了。 
 
 

 

 
  
 
 
 
 

 


  再之后就是进行旋转了： 

 

 
 

  
  
  1. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      transform: 
      
      rotate(35
      
      deg);
     
     
    
    
    
  2. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      -moz-transform: 
      
      rotate(35
      
      deg); 
      
      /* Firefox */
     
     
    
    
    
  3. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      -o-transform: 
      
      rotate(35
      
      deg); 
      
      /* Opera */
     
     
    
    
    
  4. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      -webkit-transform: 
      
      rotate(35
      
      deg); 
      
      /* Safari and Chrome */
     
     
    
    
    
  5. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      -ms-transform: 
      
      rotate(35
      
      deg); 
      
      /* IE 9 */
     
     
    
    
    

  
  
 

 

 
 
2.三个三角形
 实现三个三角形，可以是通过三个标签；但是这里用的是 CSS 的伪元素选择器( 
 ::before, ::after)来实现的并且对于三个选择器通过 position 定位就能组合成一个完整的五角星了。 
 
 
 
 
 

  
  
  1. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      .star-five {}
     
     
    
    
    
  2. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      .star-five
      
      ::before {}
     
     
    
    
    
  3. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      .star-five
      
      ::after {}
     
     
    
    
    

  
  
 
 
 

 


  下面给出完整的实现整个五角星的 CSS 代码： 

 

 
 

  
  
  1. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      .star-five {
     
     
    
    
    
  2. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      width: 
      
      0;
     
     
    
    
    
  3. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      height: 
      
      0;
     
     
    
    
    
  4. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      position: relative;
     
     
    
    
    
  5. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      border-bottom: 
      
      70px solid blue;
     
     
    
    
    
  6. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      border-left: 
      
      100px solid transparent;
     
     
    
    
    
  7. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      border-right: 
      
      100px solid transparent;
     
     
    
    
    
  8. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      transform: 
      
      rotate(35deg);
     
     
    
    
    
  9. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      -moz-transform: 
      
      rotate(35deg); 
      
      /* Firefox */
     
     
    
    
    
  10. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      -o-transform: 
      
      rotate(35deg); 
      
      /* Opera */
     
     
    
    
    
  11. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      -webkit-transform: 
      
      rotate(35deg); 
      
      /* Safari and Chrome */
     
     
    
    
    
  12. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      -ms-transform: 
      
      rotate(35deg); 
      
      /* IE 9 */
     
     
    
    
    
  13. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      margin-top: 
      
      80px;
     
     
    
    
    
  14. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      }
     
     
    
    
    
  15. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      .star-five
      
      ::before {
     
     
    
    
    
  16. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      content: 
      
      '';
     
     
    
    
    
  17. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      width: 
      
      0;
     
     
    
    
    
  18. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      height: 
      
      0;
     
     
    
    
    
  19. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      display: block;
     
     
    
    
    
  20. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      border-bottom: 
      
      70px solid red;
     
     
    
    
    
  21. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      border-left: 
      
      100px solid transparent;
     
     
    
    
    
  22. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      border-right: 
      
      100px solid transparent;
     
     
    
    
    
  23. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      position: absolute;
     
     
    
    
    
  24. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      top: 
      
      0;
     
     
    
    
    
  25. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      left: -
      
      94px;
     
     
    
    
    
  26. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      transform: 
      
      rotate(75deg);
     
     
    
    
    
  27. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      -moz-transform: 
      
      rotate(75deg); 
      
      /* Firefox */
     
     
    
    
    
  28. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      -o-transform: 
      
      rotate(75deg); 
      
      /* Opera */
     
     
    
    
    
  29. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      -webkit-transform: 
      
      rotate(75deg); 
      
      /* Safari and Chrome */
     
     
    
    
    
  30. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      -ms-transform: 
      
      rotate(75deg); 
      
      /* IE 9 */
     
     
    
    
    
  31. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      }
     
     
    
    
    
  32. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      .star-five
      
      ::after {
     
     
    
    
    
  33. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      content: 
      
      '';
     
     
    
    
    
  34. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      width: 
      
      0;
     
     
    
    
    
  35. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      height: 
      
      0;
     
     
    
    
    
  36. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      color: blue;
     
     
    
    
    
  37. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      border-bottom: 
      
      70px solid green;
     
     
    
    
    
  38. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      border-left: 
      
      100px solid transparent;
     
     
    
    
    
  39. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      border-right: 
      
      100px solid transparent;
     
     
    
    
    
  40. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      transform: 
      
      rotate(-70deg);
     
     
    
    
    
  41. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      -moz-transform: 
      
      rotate(-70deg); 
      
      /* Firefox */
     
     
    
    
    
  42. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      -o-transform: 
      
      rotate(-70deg); 
      
      /* Opera */
     
     
    
    
    
  43. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      -webkit-transform: 
      
      rotate(-70deg); 
      
      /* Safari and Chrome */
     
     
    
    
    
  44. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      -ms-transform: 
      
      rotate(-70deg); 
      
      /* IE 9 */
     
     
    
    
    
  45. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      position: absolute;
     
     
    
    
    
  46. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      left: -
      
      100px;
     
     
    
    
    
  47. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      top: 
      
      0;
     
     
    
    
    
  48. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      }
     
     
    
    
    

  
  
 
 
 
 
 

 

 

转载来源 https://blog.csdn.net/u011113654/article/details/55804609

                

                
                
        

        

    

  


    

      

        

            

              
                
                  yxjz233
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
用html css实现五角星,用CSS画五角星

				
			

			

				

					weixin_42442653的博客
				

				

					06-16
					
					1763
					
				

			

		

		

			
				
五角星#star-five {margin: 50px;position: relative;display: block;color: red;width: 0;height: 0;border-right:  100px solid transparent;border-bottom: 70px  solid red;border-left:   100px solid transparent...

			
		

	



                

              
                



	

		

			

				
					
html网页中加五角星,使用css3在网页中实现五角星样式（原理解析）

				
			

			

				

					weixin_42122432的博客
				

				

					05-31
					
					975
					
				

			

		

		

			
				
本篇文章给大家带来的内容是关于使用css3在网页中实现五角星样式，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。我们平时在web网页中看到的各种图形包括正方形，长方形，三角形，圆形等，大部分是使用css3或者背景图片来实现的，但是在开发的过程中，使用背景图片的截取有着很多的不足，比如图片需要占用额外的请求，对图片像素要求较高等，所以当下css3成为比较主流的实现方法。现在我们通过画...

			
		

	



                


  
              

                


	

		

			

				
					
HTML5学习-绘制五角星

				
			

			

				

					weixin_30544657的博客
				

				

					06-29
					
					503
					
				

			

		

		

			
				
开发工具：IntelliJ IDEA
实现效果：如下

思路：五角星实际是五边形各个顶点与不相邻顶点的连线形成的。
 因此，根据五边形的边长，以及五边形的内角度数，可以求出各个顶点的坐标。



 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta c...

			
		

	





	

		

			

				
					
HTML5——Canvas_08之【给图形绘制阴影】

				
			

			

				

					Superstatus的博客
				

				

					06-04
					
					417
					
				

			

		

		

			
				
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;    &lt;meta http-equiv="Content-Type" content="text/html; ch

			
		

	



		

			
		



	

		

			

				
					
html五角形代码,五角星.html · woshiluowenhao/TestWeb - Gitee.com

				
			

			

				

					weixin_28729843的博客
				

				

					06-09
					
					944
					
				

			

		

		

			
				
五角星评分案例* {padding: 0;margin: 0;}.comment {font-size: 40px;color: #ff3100;}.comment li {float: left;cursor: pointer;}ul {list-style: none;}.current{}$(window).ready(function () {var wjx_none = '☆'; // ...

			
		

	





	

		

			

				
					
怎么在html写五角星,html怎么显示五角星 几分给几个五角星

				
			

			

				

					weixin_35910782的博客
				

				

					06-18
					
					495
					
				

			

		

		

			
				
#star-five{margin:50px0;position:relative;display:block;color:red;width:0px;height:0px;border-right:100pxsolidtransparent;border-bottom:70pxsolidred;border-left:100pxsolidtranspar...

			
		

	





	

		

			

				
					
html里如何打出五角星,html5中怎么做五角星

				
			

			

				

					weixin_26774169的博客
				

				

					06-25
					
					2418
					
				

			

		

		

			
				
在html5中，可以通过canvas标签，以及相关的JavaScript属性和方法来画五角星；canvas标签用于通过脚本(通常是JavaScript)动态绘制图形。本教程操作环境：windows7系统、HTML5版、Dell G3电脑。是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制五角星方法，感兴趣的小伙伴们可以参考一下是HTML5中新...

			
		

	





	

		

			

				
					
html绘制五角星坐标,使用CSS如何绘制五角星？（附代码）

				
			

			

				

					weixin_35126737的博客
				

				

					05-31
					
					528
					
				

			

		

		

			
				
下面本篇文章给大家介绍一下如何使用纯CSS绘制五角星、六角形、五边形、六边形、心形。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。1、五角星#star-five {margin: 50px 0;position: relative;display: block;color: red;width: 0px;height: 0px;border-right:  100px solid...

			
		

	





	

		

			

				
					
css实现简易五角星星级

				
			

			

				

					qq_45429152的博客
				

				

					12-27
					
					970
					
				

			

		

		

			
				
利用css实现简易五角星，评分及展示

			
		

	





	

		

			

				
					
用html和css实现五星红旗

					
最新发布

				
			

			

				

					10-07
				

			

		

		

			
				
使用CSS绘制五角星。可以通过伪元素（如:before和:after）来创建五角星的不同部分，使用border属性设置边框样式，以及transform属性进行旋转和定位。  调整五角星的大小和位置，使它们按照正确的比例和排列方式显示...

			
		

	





	

		

			

				
					
html5 canvas五角星探照灯文字动画特效

				
			

			

				

					06-11
				

			

		

		

			
				
html5 canvas绘制的一款五角星探照灯文字动画特效，通过自动放大缩小五角星形状显示探照灯区域。

			
		

	





	

		

			

				
					
HTML5五角星探照灯文字效果.zip

				
			

			

				

					07-04
				

			

		

		

			
				
HTML5五角星探照灯文字效果是一种创新的网页动态展示技术，主要利用HTML5的Canvas元素进行图形绘制。Canvas是HTML5中的一个重要组成部分，它为网页提供了在浏览器内进行2D绘图的能力，允许开发者直接用JavaScript...

			
		

	





	

		

			

				
					
html里五角星怎么打,html怎么显示五角星 几分给几个五角星

				
			

			

				

					weixin_28683065的博客
				

				

					06-15
					
					301
					
				

			

		

		

			
				
满意答案m152524102016.08.08采纳率：42%等级：9已帮助：765人12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849#star-five{margin:50px0;position:relative;display:b...

			
		

	





	

		

			

				
					
html绘制五角星。。

				
			

			

				

					blithe影子
				

				

					06-01
					
					2693
					
				

			

		

		

			
				
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


  canvas绘制五角星 
  
    window.onload = function () {
      var canvas = document.getElementById("canvas");
        
      if (canvas

			
		

	





	

		

			

				
					
html的五角星怎么打出来,五角星符号怎么打出来？

				
			

			

				

					weixin_34266290的博客
				

				

					06-16
					
					1344
					
				

			

		

		

			
				
MathType中包含有超过1000多个符号，这些符号涉及到了我们工作学习的各个方面，它不仅可以在编辑数学公式中使用，也可以专门用来编辑一些特殊的符号，结合其它软件的使用，比如五角星符号。虽然这个符号在数学公式中用得比较少，但是在一些其它的地方中用得不少，就可以用MathType来编辑这个符号了。下面就来介绍五角星符号的编辑方法。具体操作步骤如下：1.按照自己的使用习惯打开MathType 图1：...

			
		

	





	

		

			

				
					
html如何添加五角星/星星图案 - GitHub - octicons

				
			

			

				

					weixin_34399060的博客
				

				

					08-27
					
					3008
					
				

			

		

		

			
				
bootstrap-4 移除了glyphicons/glyphicons-migration
有没有其他方法添加五角星/星星图案。使用github octicons：npm install octicons<svg width="20" height="20" viewBox="0 0 16 16" aria-hidden="true">  <image xlink:href=...

			
		

	





	

		

			

				
					
打分五角星html制作,css简单实现五角星评分、点赞收藏、展示评分（半颗星、1/3颗星）...

				
			

			

				

					weixin_31011587的博客
				

				

					07-07
					
					3198
					
				

			

		

		

			
				
css简单实现五角星评分、点赞收藏、展示评分(半颗星、1/3颗星)1. 前言之前做的好几个项目中，都会遇到打分，评分，点赞这样的需求，写了很多次，每次需要再写的时候，就会翻出之前写过的代码，然后 copy 过来。总觉得这样的话没有进步，没有把知识放进脑袋里，所以，自己花了 2 个小时，把这三种类型的需求自己写了 demo 并做了演示，这样的话，感觉一字一字敲出来的代码，确实是到了脑袋里了。之前一直...

			
		

	





	

		

			

				
					
HTML5 中用CANVAS画一个五角星

				
			

			

				

					jackyrongvip的专栏
				

				

					11-17
					
					618
					
				

			

		

		

			
				
HTML5 中用CANVAS画一个五角星,代码如下:
[code="java"]


function init() {
  var ctx = document.getElementById('stars').getContext('2d');
  ctx.fillStyle = "#827839";
  ctx.shadowColor="#000000";
  ctx.shad...

			
		

	





	

		

			

				
					
html加五星

				
			

			

				

					heshouwu_1026的博客
				

				

					12-10
					
					500
					
				

			

		

		

			
				
效果如下图


1.这里是style样式
* {
    box-sizing: border-box;
}


.rating {
    display: flex;
    width: 100%;
    justify-content: left;
    overflow: hidden;
    flex-direction: row-reverse;
    height: 40px;
    position: relative;
}

.rating-0 {
    -webkit-fi

			
		

	





	

		

			

				
					
css 样式花五角星

				
			

			

				

					07-27
				

			

		

		

			
				
要在 CSS 中创建一个五角星样式，你可以使用伪元素 `::before` 和 `::after` 来实现。以下是一个示例代码：  ```css .star {  position: relative;  display: inline-block;  width: 0;  height: 0;  border-right: ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值