Trying to make a div format to fit in an svg image

Question

I am trying to make a div to stand over the svg image. I want to make the div have the shape of the ship's siren and use animation to make it blink, I tried to use transform: skew, and rotate but it doesn't fit the shape that i'm trying to achieve, does anyone have any suggestions? The green background at the div is just to see the shape of it, i will set to transparent. Here is my code. Thank you.

#animacao-policia {
  position: static;
  width: 80%;
  animation: none;
  margin-left: 10%;
  margin-top: 50px;
}
#navio-policia {
  position: relative;
}
#luz_azul{
  position: absolute;
  width: 10.4%;
  height: 21%;
  z-index: 7;
  left: 33.6%;
  transform: skew(-10deg);
  background: green;
  box-shadow: inset 0 0 20px 30px rgba(0, 102, 255, 0.28),
  0 0 10px 10px rgba(0, 102, 255, 0.5);
  animation: brilho .5s infinite linear;
}
#luz_vermelha{
  position: absolute;
  width: 10.3%;
  height: 21%;
  z-index: 7;
  right: 33.8%;
  transform: skew(8deg);
  background: green;
  box-shadow: inset 0 0 20px 30px rgba(255, 0, 0, 0.28),
0 0 10px 10px rgba(255, 0, 0, 0.5);
animation: brilho .5s .25s infinite linear;
}

@keyframes brilho {
  0% {
  }

  96% {
    opacity: 0;
  }
  98% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div id="animacao-policia">
    <div id="navio-policia">
        <div id="luz_azul"></div>
        <div id="luz_vermelha"></div>
            <a @click="dialogPrisao = true">
                <div id="img-policia">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 264.7"><defs><style>.cls-1{fill:#039;}.cls-2{fill:#903;}.cls-3{fill:#ccc;}.cls-4{fill:#603;}.cls-5{fill:#c03;}.cls-6{fill:#009;}.cls-7{fill:#036;}.cls-8{fill:#06c;}</style></defs><title>Ativo 1</title><g id="Camada_2" data-name="Camada 2"><g id="Layer_1" data-name="Layer 1"><polygon class="cls-1" points="229.5 0 256 91 150.8 56.9 176.5 0 229.5 0"/><polygon class="cls-2" points="335.5 0 282.5 0 256 91 361.2 56.9 335.5 0"/><polygon class="cls-3" points="282.5 0 291.1 56.9 256 91 220.9 56.9 229.5 0 282.5 0"/><path class="cls-4" d="M361.2,56.9H333.1L256,125.1,395.4,91A34.23,34.23,0,0,0,361.2,56.9Z"/><path class="cls-5" d="M333.2,56.9H150.8A34.21,34.21,0,0,0,116.7,91L256,125.1,358.2,91C358.2,72.2,346.9,56.9,333.2,56.9Z"/><path class="cls-6" d="M256,196.4l77.2,68.3h28.1a34.21,34.21,0,0,0,34.1-34.1Z"/><path class="cls-1" d="M116.6,230.5,256,196.4l102.2,34.1c0,18.8-11.3,34.1-25,34.1H150.8A34.23,34.23,0,0,1,116.6,230.5Z"/><path class="cls-7" d="M395.4,91H358.2L256,194.9l256-34.1C479.7,132.6,441.6,106.3,395.4,91Z"/><path class="cls-8" d="M443.7,160.7,256,194.9,0,160.7c32.3-28.2,70.4-54.5,116.6-69.8H358.2C392.1,106.3,420,132.6,443.7,160.7Z"/><path class="cls-7" d="M443.7,160.7l-85.5,69.8h37.2c46.2-15.3,84.3-41.6,116.6-69.8Z"/><path class="cls-8" d="M0,160.7H443.7c-23.7,28.2-51.6,54.5-85.5,69.8H116.6C70.4,215.2,32.3,188.9,0,160.7Z"/></g></g>
                  </svg>
              </div>
            </a>
        </div>
    </div>

score 3 · Answer 1 · answered Dec 05 '19 at 17:32

Just create another polygon with the same size and give your style with a "z-index". Example:

#animacao-policia {
  position: static;
  width: 80%;
  animation: none;
  margin-left: 10%;
  margin-top: 50px;
}
#navio-policia {
  position: relative;
}
#luz_azul{     
  z-index: 7;      
  background: green;
  box-shadow: inset 0 0 20px 30px rgba(0, 102, 255, 0.28),
  0 0 10px 10px rgba(0, 102, 255, 0.5);
  animation: brilho .5s infinite linear;
}
#luz_vermelha{    
  z-index: 7;       
  background: green;
  box-shadow: inset 0 0 20px 30px rgba(255, 0, 0, 0.28),
0 0 10px 10px rgba(255, 0, 0, 0.5);
animation: brilho .5s .25s infinite linear;
}

@keyframes brilho {
  0% {
  }

  96% {
    opacity: 0;
  }
  98% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div id="animacao-policia">
    <div id="navio-policia">              
            <a @click="dialogPrisao = true">
                <div id="img-policia">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 264.7"><defs><style>.cls-1{fill:#039;}.cls-2{fill:#903;}.cls-3{fill:#ccc;}.cls-4{fill:#603;}.cls-5{fill:#c03;}.cls-6{fill:#009;}.cls-7{fill:#036;}.cls-8{fill:#06c;}</style></defs><title>Ativo 1</title><g id="Camada_2" data-name="Camada 2"><g id="Layer_1" data-name="Layer 1"><polygon class="cls-1" points="229.5 0 256 91 150.8 56.9 176.5 0 229.5 0"/><polygon id="luz_azul" points="229.5 0 256 91 150.8 56.9 176.5 0 229.5 0"/><polygon class="cls-2" points="335.5 0 282.5 0 256 91 361.2 56.9 335.5 0"/><polygon id="luz_vermelha" points="335.5 0 282.5 0 256 91 361.2 56.9 335.5 0"/><polygon class="cls-3" points="282.5 0 291.1 56.9 256 91 220.9 56.9 229.5 0 282.5 0"/><path class="cls-4" d="M361.2,56.9H333.1L256,125.1,395.4,91A34.23,34.23,0,0,0,361.2,56.9Z"/><path class="cls-5" d="M333.2,56.9H150.8A34.21,34.21,0,0,0,116.7,91L256,125.1,358.2,91C358.2,72.2,346.9,56.9,333.2,56.9Z"/><path class="cls-6" d="M256,196.4l77.2,68.3h28.1a34.21,34.21,0,0,0,34.1-34.1Z"/><path class="cls-1" d="M116.6,230.5,256,196.4l102.2,34.1c0,18.8-11.3,34.1-25,34.1H150.8A34.23,34.23,0,0,1,116.6,230.5Z"/><path class="cls-7" d="M395.4,91H358.2L256,194.9l256-34.1C479.7,132.6,441.6,106.3,395.4,91Z"/><path class="cls-8" d="M443.7,160.7,256,194.9,0,160.7c32.3-28.2,70.4-54.5,116.6-69.8H358.2C392.1,106.3,420,132.6,443.7,160.7Z"/><path class="cls-7" d="M443.7,160.7l-85.5,69.8h37.2c46.2-15.3,84.3-41.6,116.6-69.8Z"/><path class="cls-8" d="M0,160.7H443.7c-23.7,28.2-51.6,54.5-85.5,69.8H116.6C70.4,215.2,32.3,188.9,0,160.7Z"/></g></g>
                  </svg>
              </div>
            </a>
        </div>
    </div>

That's a good resolution, but now the drop shadow is not working — Flavio Caruso, Dec 05 '19 at 17:39
You can create a "filter" like a pseudo-element and call it in your polygon. You can use this for reference: https://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3 — Donada, Dec 05 '19 at 17:56

Trying to make a div format to fit in an svg image

1 Answers1