为梯形添加阴影

Question

First of all, this question might be similar to this , but the shape in my case is different, so it couldn't really help me out.

The trapezoid code is the following:

 #light { /*setting the element*/ border-bottom: 164px solid grey; border-left: 148px solid transparent; border-right: 165px solid transparent; height: 0; width: 80px; } 

 <div id="light"></div> 

Just to clarify, I am trying to add the shadow effect, similar to the following example:

 #bulb { /*setting the element*/ background: grey; width: 200px; height: 200px; border-radius: 50%; /*adding "light" (shadow)*/ box-shadow: 0 0 100px 10px rgba(128, 128, 128, 0.5); } 

 <div id="bulb"></div> 

When I try to add the regular box-shadow: , my trapezoid becomes a regular rectangle with white parts.

Answer 1

Instead of a box-shadow you could use a drop-shadow filter, eg

filter: drop-shadow(0 0 40px #222);

 #light { /*setting the element*/ border-bottom: 164px solid grey; border-left: 148px solid transparent; border-right: 165px solid transparent; height: 0; width: 80px; filter: drop-shadow(0 0 40px #222); } 

 <div id="light"></div> 

More info on MDN

Answer 2

I would create the shape differently using pseudo element with a blur effect:

 #light { width:400px; height:160px; position:relative; } #light:before, #light:after{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; background: /*triangle on the right*/ linear-gradient(to top right,grey 49.5%,transparent 50%) right/150px 100%, /*triangle on the left*/ linear-gradient(to top left, grey 49.5%,transparent 50%) left /150px 100%, /*rectangle at the center*/ linear-gradient(grey,grey) center/100px 100%; background-repeat:no-repeat; } #light:before { filter:blur(20px); } 

 <div id="light"> </div> 

Answer 3

based on css-tricks Double-Box Method you can "have a container box with hidden overflow and another box inside it which is rotate and hangs out of it"

 .light { width: 350px; height: 135px; position: relative; overflow: hidden; box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5); } .light:after { content: ""; position: absolute; width: 300px; height: 300px; background: #999; transform: rotate(45deg); top: 25px; left: 25px; box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5); } 

 <div class="light"></div> 

Answer 4

In your example, you can't add a proper box-shadow without having these white parts on each side. That is because the CSS border colouring the grey shaped trapeziod DIV.

In the example above, they are using an .SVG file (image), since it is an image, the original shape of it is a trapezoid, not a rectangle with white side like yours.

You will need to draw an .svg in the shape and color you want, and then add a shadow to the element itself.

Here are more informations about SVG .

I hope it helps.