Skip to content

Instantly share code, notes, and snippets.

@masoudei

masoudei/index.html

Created May 28, 2022 04:25
Show Gist options
  • Save masoudei/3d6f77c5e7369aa8287c24f8b156ef25 to your computer and use it in GitHub Desktop.
Save masoudei/3d6f77c5e7369aa8287c24f8b156ef25 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. masoudei created this gist May 28, 2022.
    9 changes: 9 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <div class="shadow">
    <div class="triangle-wrapper">
    <div class="triangle">
    <p>Todrick</p>
    </div>
    </div>
    </div>


    39 changes: 39 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: hsl(210, 50%, 14%);
    height: 100vh
    }

    $vw-width: 30vw;
    $vw-height: calc(#{$vw-width} / (1/ 1));
    $tod-tri: #ff00ff;
    $gold-tri: #fccc47;

    .shadow {
    filter: drop-shadow(10px 10px 200px $tod-tri) drop-shadow(-10px -10px 50px $tod-tri);
    }

    .triangle-wrapper {
    width: $vw-width;
    height: $vw-height;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background-color: $tod-tri;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .triangle {
    width: calc(#{$vw-width} - 30px);
    height: calc(#{$vw-width} - 30px);
    background-color: hsl(210, 50%, 14%);
    //background-color: $gold-tri;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    margin-top: 10px;
    filter: blur(115px) drop-shadow(-10px -10px 75px $tod-tri);
    p {
    color: #FFF;
    }
    }
    7 changes: 7 additions & 0 deletions todrick-triangle-neon-glow-effect-using-css-drop-shadows-and-clip-paths.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Todrick Triangle - Neon Glow Effect Using CSS Drop Shadows and Clip Paths
    -------------------------------------------------------------------------
    CSS neon glow effect using drop shadows and clip-path.

    A [Pen](https://codepen.io/davebrogan/pen/OJJKXpy) by [Dave Brogan](https://codepen.io/davebrogan) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/OJJKXpy).