-3

I am currently designing an android phonegap application and i need help trying to recreate the triangles with a Box-shadow of some sort but the box shadow will only show as a square and not a triangle. When i tried searching for an answer, i could only find one for equilateral triangles or only on two sides, not the longest side.

The Design (Hidden some parts): https://i.stack.imgur.com/ysopX.png

Edit:

Pastebin Link for current prototype (Currently not responsive - designed for 1080px by 1920px):

pastebin.com/GmYh9d9F

Wneild5
  • 1
  • 3
  • 1
    As we don't provide code writing here at SO, you need to provide a minimal working code snippet – Asons Sep 22 '17 at 16:06

1 Answers1

1

What you need is the drop-shadow filter:

.test {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 100px 100px;
  border-color: transparent transparent #007bff transparent;
  filter: drop-shadow(0 0 4px #555);
}
<div class="test"></div>