<!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>
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
