Add colour gradient to border (upright triangle shape)?

Question

I'm trying to create a searchlight/ spotlight effect that will highlight some text using CSS animations. Heres a fiddle

I would like to have the colouring of the spotlight become more translucent the further away from the light source (using a colour gradient).

Due to my spotlight being a upside down triangle - I cannot seem to do this using the methods outlined here.

Would somebody be able to help me with this?

CSS:

h1 {
  color: green;
  position: absolute;
}

        body { 
    background-color: black;  
    overflow: hidden; 
    margin: 0;
 }

.spotlight {
      position: relative;
        width: 10vw;
        height: 0vh;
        border-top: 100vh solid rgba(255, 255, 255, 0.25);
        border-left: 12vw solid transparent;
        border-right: 12vw solid transparent;
        background-color: transparent;
        -webkit-transform-origin: 50% 100% 0;
        z-index: 0;
  -webkit-animation: move 7s ease-in-out;
    }

     @-webkit-keyframes move {
      0%  { 
        -webkit-transform: rotate(-30deg) scaleX(0.4);
      }
      50% {
        -webkit-transform: rotate(30deg) scaleX(0.4);
      }
      100% {
        -webkit-transform: rotate(0deg) ;
      }
    }

HTML:

 <html>
    <head>

    </head>
    <body>

      <h1>
      Some text
      </h1>

        <div class="spotlight spot1"></div>

    </body>
    </html>

I was preparing an answer for your old question, but I guess will put it together here ;) — Temani Afif, Jun 09 '19 at 20:45
Haha! Thank you Temani - you should put it on both so I can accept both as answers :) — Toms Code, Jun 09 '19 at 20:46

Temani Afif · Accepted Answer · 2019-06-09T21:09:42.060

You can consider gradient to color the shape then rely on some persepctive transformation to create the triangle effect.

I used different colors so we can clearly identify them and I considerd pseudo element to optimize the code:

h1 {
  color: green;
}

body {
  background-color: black;
  overflow: hidden;
  margin: 0;
}

body:before {
  content: "";
  position: absolute;
  left: 8vw;
  top: 0;
  bottom: -20px;
  width: 12vw;
  background: linear-gradient(to bottom, blue 30%, yellow);
  z-index: -1;
  animation: move 7s ease-in-out forwards;
  transform-origin: bottom;
}

@keyframes move {
  0% {
    transform: perspective(100px) rotateX(-30deg) rotate(-30deg) scaleX(0.4);
  }
  50% {
    transform: perspective(100px) rotateX(-30deg) rotate(30deg) scaleX(0.4);
  }
  100% {
    transform: perspective(100px) rotateX(-30deg) rotate(0deg) scaleX(1);
  }
}

<h1>
  Some text
</h1>

Another idea is to consider multiple background to avoid the complexity of perspective:

h1 {
  color: green;
}

body {
  background-color: black;
  overflow: hidden;
  margin: 0;
}

body:before {
  content: "";
  position: absolute;
  left: 0;
  top:0;
  bottom: -20px;
  width: 30vw;
  background: 
     linear-gradient(to bottom left ,transparent 49%,black 50%) left /12vw 100%,
     linear-gradient(to bottom right,transparent 49%,black 50%) right/12vw 100%,
     linear-gradient(to bottom, blue 30%, yellow);
  background-repeat:no-repeat;
  z-index: -1;
  animation: move 7s ease-in-out;
  transform-origin: bottom;
}

@keyframes move {
  0% {
    transform:rotate(-30deg) scaleX(0.4);
    top: -200px;
  }
  50% {
    transform:rotate(30deg) scaleX(0.4);
    top: -200px;
  }

}

<h1>
  Some text
</h1>

The negative values of top/bottom are used to make sure the element fill all the spaces like you want in your previous question.

Add colour gradient to border (upright triangle shape)?

1 Answers1