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

Catch me if you can

Catch me if you can

By nilsvogt
My first steps..

My first steps..

By ceamor
Animated clouds

Animated clouds

By Elwin van den Hazel
Image Editor - THREEJS

Image Editor - THREEJS

By jsosas
Doorway

Doorway

By Harrewarre
platformer EJS

platformer EJS

By Semaviro
Sample Solution

Sample Solution

By agunay
A Pen by Bounasser Abdelwahab

A Pen by Bounasser Abdelwahab

By Bounasser-Abdelwahab
© 2018 - Copyright CodeSeek.co
contact email