pure CSS stars

In this example below you will see how to do a pure CSS stars with some HTML / CSS and Javascript

some stars with a marching ant border in pure CSS

Thumbnail
This awesome code was written by ⁣, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ⁣ ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>pure CSS stars</title>
  
  
  <link rel='stylesheet prefetch' href='css/https___codepen_io_pixela.css'>

  
  
</head>

<body>

  
<input type="radio" name="type" id="polygons"/>
<label for="polygons">Polygons</label><br/>
<input type="radio" name="type" checked="checked" id="stars"/>
<label for="stars">Stars</label><br/>
<input type="radio" name="type" id="pointy"/>
<label class="checkbox-label" for="pointy">Pointy Stars</label><br/>
<input type="checkbox" name="ants" id="ants"/>
<label for="ants">Marching ants</label><br/>
<div class="wrapper w-#{i}">
  <div class="section __#{i}points">
    <div class="div div-#{n%2}">
      <div class="div div-#{n%2}">
        <div class="div div-#{n%2}">
          <div class="div div-#{n%2}">
            <div class="div div-#{n%2}">
              <div class="div div-#{n%2}">
                <div class="div div-#{n%2}">
                  <div class="div div-#{n%2}">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="wrapper w-#{i}">
  <div class="section __#{i}points">
    <div class="div div-#{n%2}">
      <div class="div div-#{n%2}">
        <div class="div div-#{n%2}">
          <div class="div div-#{n%2}">
            <div class="div div-#{n%2}">
              <div class="div div-#{n%2}">
                <div class="div div-#{n%2}">
                  <div class="div div-#{n%2}">
                    <div class="div div-#{n%2}">
                      <div class="div div-#{n%2}">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="wrapper w-#{i}">
  <div class="section __#{i}points">
    <div class="div div-#{n%2}">
      <div class="div div-#{n%2}">
        <div class="div div-#{n%2}">
          <div class="div div-#{n%2}">
            <div class="div div-#{n%2}">
              <div class="div div-#{n%2}">
                <div class="div div-#{n%2}">
                  <div class="div div-#{n%2}">
                    <div class="div div-#{n%2}">
                      <div class="div div-#{n%2}">
                        <div class="div div-#{n%2}">
                          <div class="div div-#{n%2}">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="wrapper w-#{i}">
  <div class="section __#{i}points">
    <div class="div div-#{n%2}">
      <div class="div div-#{n%2}">
        <div class="div div-#{n%2}">
          <div class="div div-#{n%2}">
            <div class="div div-#{n%2}">
              <div class="div div-#{n%2}">
                <div class="div div-#{n%2}">
                  <div class="div div-#{n%2}">
                    <div class="div div-#{n%2}">
                      <div class="div div-#{n%2}">
                        <div class="div div-#{n%2}">
                          <div class="div div-#{n%2}">
                            <div class="div div-#{n%2}">
                              <div class="div div-#{n%2}">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="wrapper w-#{i}">
  <div class="section __#{i}points">
    <div class="div div-#{n%2}">
      <div class="div div-#{n%2}">
        <div class="div div-#{n%2}">
          <div class="div div-#{n%2}">
            <div class="div div-#{n%2}">
              <div class="div div-#{n%2}">
                <div class="div div-#{n%2}">
                  <div class="div div-#{n%2}">
                    <div class="div div-#{n%2}">
                      <div class="div div-#{n%2}">
                        <div class="div div-#{n%2}">
                          <div class="div div-#{n%2}">
                            <div class="div div-#{n%2}">
                              <div class="div div-#{n%2}">
                                <div class="div div-#{n%2}">
                                  <div class="div div-#{n%2}">
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="wrapper w-#{i}">
  <div class="section __#{i}points">
    <div class="div div-#{n%2}">
      <div class="div div-#{n%2}">
        <div class="div div-#{n%2}">
          <div class="div div-#{n%2}">
            <div class="div div-#{n%2}">
              <div class="div div-#{n%2}">
                <div class="div div-#{n%2}">
                  <div class="div div-#{n%2}">
                    <div class="div div-#{n%2}">
                      <div class="div div-#{n%2}">
                        <div class="div div-#{n%2}">
                          <div class="div div-#{n%2}">
                            <div class="div div-#{n%2}">
                              <div class="div div-#{n%2}">
                                <div class="div div-#{n%2}">
                                  <div class="div div-#{n%2}">
                                    <div class="div div-#{n%2}">
                                      <div class="div div-#{n%2}">
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="wrapper w-#{i}">
  <div class="section __#{i}points">
    <div class="div div-#{n%2}">
      <div class="div div-#{n%2}">
        <div class="div div-#{n%2}">
          <div class="div div-#{n%2}">
            <div class="div div-#{n%2}">
              <div class="div div-#{n%2}">
                <div class="div div-#{n%2}">
                  <div class="div div-#{n%2}">
                    <div class="div div-#{n%2}">
                      <div class="div div-#{n%2}">
                        <div class="div div-#{n%2}">
                          <div class="div div-#{n%2}">
                            <div class="div div-#{n%2}">
                              <div class="div div-#{n%2}">
                                <div class="div div-#{n%2}">
                                  <div class="div div-#{n%2}">
                                    <div class="div div-#{n%2}">
                                      <div class="div div-#{n%2}">
                                        <div class="div div-#{n%2}">
                                          <div class="div div-#{n%2}">
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="wrapper w-#{i}">
  <div class="section __#{i}points">
    <div class="div div-#{n%2}">
      <div class="div div-#{n%2}">
        <div class="div div-#{n%2}">
          <div class="div div-#{n%2}">
            <div class="div div-#{n%2}">
              <div class="div div-#{n%2}">
                <div class="div div-#{n%2}">
                  <div class="div div-#{n%2}">
                    <div class="div div-#{n%2}">
                      <div class="div div-#{n%2}">
                        <div class="div div-#{n%2}">
                          <div class="div div-#{n%2}">
                            <div class="div div-#{n%2}">
                              <div class="div div-#{n%2}">
                                <div class="div div-#{n%2}">
                                  <div class="div div-#{n%2}">
                                    <div class="div div-#{n%2}">
                                      <div class="div div-#{n%2}">
                                        <div class="div div-#{n%2}">
                                          <div class="div div-#{n%2}">
                                            <div class="div div-#{n%2}">
                                              <div class="div div-#{n%2}">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="wrapper w-#{i}">
  <div class="section __#{i}points">
    <div class="div div-#{n%2}">
      <div class="div div-#{n%2}">
        <div class="div div-#{n%2}">
          <div class="div div-#{n%2}">
            <div class="div div-#{n%2}">
              <div class="div div-#{n%2}">
                <div class="div div-#{n%2}">
                  <div class="div div-#{n%2}">
                    <div class="div div-#{n%2}">
                      <div class="div div-#{n%2}">
                        <div class="div div-#{n%2}">
                          <div class="div div-#{n%2}">
                            <div class="div div-#{n%2}">
                              <div class="div div-#{n%2}">
                                <div class="div div-#{n%2}">
                                  <div class="div div-#{n%2}">
                                    <div class="div div-#{n%2}">
                                      <div class="div div-#{n%2}">
                                        <div class="div div-#{n%2}">
                                          <div class="div div-#{n%2}">
                                            <div class="div div-#{n%2}">
                                              <div class="div div-#{n%2}">
                                                <div class="div div-#{n%2}">
                                                  <div class="div div-#{n%2}">
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<nav id="PENS" style="background-color:#a7d;color:#fff;">
  <style>@import '//codepen.io/pixelass/pen/oiqzn.css'</style>
  <script>
    PENS = window.PENS || {}
    
    
    
    
    PENS.toggle = function(target){
    
    
    
    
      document.getElementById('PENS').classList.toggle('open')
    
    
    
    
    }
    
    
    
    
  </script>
  <header onclick="PENS.toggle(this)">You might also like</header>
  <ul class="PENS-list">
    <li class="PENS-list-item item-0"><a href="/pixelass/pen/Fxmws/right/?editors=010" target="blank">
        <iframe src="/pixelass/fullcpgrid/Fxmws" scrolling="no"></iframe></a></li>
    <li class="PENS-list-item item-1"><a href="/pixelass/pen/jqick/right/?editors=010" target="blank">
        <iframe src="/pixelass/fullcpgrid/jqick" scrolling="no"></iframe></a></li>
    <li class="PENS-list-item item-2"><a href="/pixelass/pen/KleqJ/right/?editors=010" target="blank">
        <iframe src="/pixelass/fullcpgrid/KleqJ" scrolling="no"></iframe></a></li>
    <li class="PENS-list-item item-3"><a href="/pixelass/pen/cdrwI/right/?editors=010" target="blank">
        <iframe src="/pixelass/fullcpgrid/cdrwI" scrolling="no"></iframe></a></li>
  </ul>
</nav>
  
  

</body>

</html>

Comments

More from ⁣

pure CSS DNA

pure CSS DNA

By pixelass
Live editing text on a canvas

Live editing text on a canvas

By pixelass
3d eye |&#xA0;pure CSS

3d eye | pure CSS

By pixelass
element queries concept

element queries concept

By ⁣

You Might Also Like

Testing Typography

Testing Typography

By ahmmu15
cand-status

cand-status

By mohansethu
A Pen by Victor

A Pen by Victor

By Victor96
A Pen by Nathan Barrientos

A Pen by Nathan Barrientos

By Nate29
Ronny&apos;s Web Page

Ronny's Web Page

By razconauag
Normalizing Positions

Normalizing Positions

By thenormalsquid
A Pen by Ness

A Pen by Ness

By nesb10
Rainbow Rain &#x1F308;

Rainbow Rain 🌈

By yumeeeei
© 2018 - Copyright CodeSeek.co
contact email