用CSS实现三角星和六角星

286 阅读1分钟

用CSS可以实现很多有趣的图案,今天先实现三角星和六角星的分享。

三角星(一)

CSS:

<style>
  #div1{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
  }
  </style>

HTML:

<body>
  <div id="div1"></div>
</body>

三角星(2)

CSS

#div1{
     width:0px;
     height:0px;
     border:50px solid transparent;
     border-left-color:red;
   }

HTML

<div id="div1"></div>

六角星

CSS:

<style>
  #div1{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    position: relative;
  }
  #div1::after{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    position: absolute;
    content: '';
    left: -50px;
    top: 20px;
  } 
  </style>

HTML

<body>
  <div id="div1"></div>
</body>