Skip to content

Instantly share code, notes, and snippets.

@codingdudecom

codingdudecom/css-star-5-pointed-star.markdown

Created October 6, 2021 13:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save codingdudecom/7f511b7e59054fd772741842e804f682 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save codingdudecom/7f511b7e59054fd772741842e804f682 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. codingdudecom created this gist Oct 6, 2021.
    7 changes: 7 additions & 0 deletions css-star-5-pointed-star.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    CSS Star: 5 Pointed Star ★
    --------------------------
    [CSS star](http://www.coding-dude.com/wp/css/css-star/) shapes series on Coding-Dude.com

    A [Pen](https://codepen.io/inegoita/pen/NWgQbvg) by [Ion Emil Negoita](https://codepen.io/inegoita) on [CodePen](https://codepen.io).

    [License](https://codepen.io/inegoita/pen/NWgQbvg/license).
    3 changes: 3 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <div class="five-pointed-star"></div>

    <footer style="position:fixed;bottom:0;">read the full article: <a href="http://www.coding-dude.com/wp/css/css-star/">CSS Star</a></footer>
    39 changes: 39 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    .five-pointed-star {
    --star-color:orange;
    margin:1em auto;
    font-size:10em;
    position: relative;
    display: block;
    width: 0px;
    height: 0px;
    border-right: 1em solid transparent;
    border-bottom: 0.7em solid var(--star-color);
    border-left: 1em solid transparent;
    transform: rotate(35deg);
    }
    .five-pointed-star:before {
    border-bottom: 0.8em solid var(--star-color);
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -0.45em;
    left: -0.65em;
    display: block;
    content:"";
    transform: rotate(-35deg);
    }
    .five-pointed-star:after {
    position: absolute;
    display: block;
    top: 0.03em;
    left: -1.05em;
    width: 0;
    height: 0;
    border-right: 1em solid transparent;
    border-bottom: 0.7em solid var(--star-color);
    border-left: 1em solid transparent;
    transform: rotate(-70deg);
    content:"";
    }