HTML 五角星 -- CSS

最新推荐文章于 2024-03-18 18:58:56 发布

yxjz233

最新推荐文章于 2024-03-18 18:58:56 发布

阅读量1k

点赞数 1

原文链接：https://blog.csdn.net/u011113654/article/details/55804609

版权

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

显示特殊字符或者使用字体图标的方式
CSS 方式
SVG
canvas 绘制

关于第一种方式，不做介绍。接下来着重介绍 2, 3, 4 的方式实现。

这篇文章要讲解的就是如何通过 CSS 的方式实现五角星。

对于五角星，我们其实可以看作是 3 个三角形通过旋转定位过后组合而成的。

这是组合出来的效果。我们可以在进行一次拆分：

可以看到上图的3个三角形通过定位就能组合成一个五角星了。

总结一下，通过 CSS 实现五角星需要的步骤：

三角形
需要3个三角形
旋转
定位

1.实现三角形

利用 CSS 的 border 属性来实现三角形。

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


   
   
     
     
      
      
     
     
     
     
      
      
       
       .star-five {
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
           width: 0;
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
           height: 0;
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
           position: relative;
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
           border-bottom: 70px solid blue;
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
           border-left: 100px solid transparent;
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
           border-right: 100px solid transparent;
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
           margin-top: 80px;
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       }

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

再之后就是进行旋转了：


  
  
    
    
     
     
    
    
    
    
     
     
      
      transform: 
      
      rotate(35
      
      deg);
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      -moz-transform: 
      
      rotate(35
      
      deg); 
      
      /* Firefox */
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      -o-transform: 
      
      rotate(35
      
      deg); 
      
      /* Opera */
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      -webkit-transform: 
      
      rotate(35
      
      deg); 
      
      /* Safari and Chrome */
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      -ms-transform: 
      
      rotate(35
      
      deg); 
      
      /* IE 9 */

2.三个三角形

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


  
  
    
    
     
     
    
    
    
    
     
     
      
      .star-five {}
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      .star-five
      
      ::before {}
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      .star-five
      
      ::after {}

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


  
  
    
    
     
     
    
    
    
    
     
     
      
      .star-five {
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      width: 
      
      0;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      height: 
      
      0;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      position: relative;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      border-bottom: 
      
      70px solid blue;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      border-left: 
      
      100px solid transparent;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      border-right: 
      
      100px solid transparent;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      transform: 
      
      rotate(35deg);
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      -moz-transform: 
      
      rotate(35deg); 
      
      /* Firefox */
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      -o-transform: 
      
      rotate(35deg); 
      
      /* Opera */
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      -webkit-transform: 
      
      rotate(35deg); 
      
      /* Safari and Chrome */
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      -ms-transform: 
      
      rotate(35deg); 
      
      /* IE 9 */
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      margin-top: 
      
      80px;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      .star-five
      
      ::before {
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      content: 
      
      '';
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      width: 
      
      0;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      height: 
      
      0;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      display: block;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      border-bottom: 
      
      70px solid red;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      border-left: 
      
      100px solid transparent;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      border-right: 
      
      100px solid transparent;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      position: absolute;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      top: 
      
      0;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      left: -
      
      94px;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      transform: 
      
      rotate(75deg);
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      -moz-transform: 
      
      rotate(75deg); 
      
      /* Firefox */
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      -o-transform: 
      
      rotate(75deg); 
      
      /* Opera */
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      -webkit-transform: 
      
      rotate(75deg); 
      
      /* Safari and Chrome */
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      -ms-transform: 
      
      rotate(75deg); 
      
      /* IE 9 */
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      .star-five
      
      ::after {
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      content: 
      
      '';
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      width: 
      
      0;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      height: 
      
      0;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      color: blue;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      border-bottom: 
      
      70px solid green;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      border-left: 
      
      100px solid transparent;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      border-right: 
      
      100px solid transparent;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      transform: 
      
      rotate(-70deg);
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      -moz-transform: 
      
      rotate(-70deg); 
      
      /* Firefox */
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      -o-transform: 
      
      rotate(-70deg); 
      
      /* Opera */
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      -webkit-transform: 
      
      rotate(-70deg); 
      
      /* Safari and Chrome */
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      -ms-transform: 
      
      rotate(-70deg); 
      
      /* IE 9 */
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      position: absolute;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      left: -
      
      100px;
     
     
    
    

    
    
     
     
    
    
    
    
     
         
      
      top: 
      
      0;
     
     
    
    

    
    
     
     
    
    
    
    
     
     
      
      }