How to connect the box-shadow of two divs?

Question

I am trying to create a speech bubble using two divs, one is a triangle and the other is a rectangle.

This is the code:

 #box { width: 200px; height: 80px; background-color: #ccc; position: relative; left: 300px; top: 180px; padding: 5px; border-radius: 10px; -moz-box-shadow: 0 0 5px #333; -webkit-box-shadow: 0 0 5px #333; box-shadow: 0 0 5px #333; } #tri { position: absolute; top: -15px; left: 40px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #ccc; float: left; margin: 2px 5px 0px 0px; -moz-box-shadow: 0 0 5px #333; -webkit-box-shadow: 0 0 5px #333; box-shadow: 0 0 5px #333; } 

 <div id="box"> <div id="tri"></div> Some text </div> 

This problem is that something happens at the point where the triangle connects to the box. The shadow doesn't go around the triangle. Is it possible to fix this so that the shadow goes around the box and continues around the triangle?

Answer 1

Using that technique, you wont be able to place a shadow on the triangle shape.

We can create the triangle with an :after pseudo-element and create the boxes main shadow with a :before pseudo-element.

The Triangle

The triangle looks like a diamond and the background of the box overlaps the diamond to make it look like a triangle:

This: becomes this:

The z-index: -1 places both pseudo-elements underneath their parents background.

The main shadow

The main shadow needs to be placed on a pseudo-element so that it can be overlapped by the triangle background, whilst at the same time, the triangles bottom half is overlapped by the elements background. This image shows the layers:

Full Example

 #box { width: 200px; height: 80px; background: #CCC; position: relative; left: 300px; top: 180px; padding: 5px; border-radius: 10px; } #box:before, #box:after { content: ''; position: absolute; box-shadow: 0 0 5px #333; z-index: -1; } #box:before { height: 100%; width: 100%; left: 0; top: 0; border-radius: 10px; } #box:after { background: #CCC; height: 20px; width: 20px; top: -10px; left: 50%; margin-left: -5px; transform: rotate(45deg); z-index: -1; } 

 <div id="box"> Some text </div> 

Answer 2

Use this

DEMO

.arrow_box {
    position: relative;
    top:150px;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
     width:200px;
    height:80px;
}
.arrow_box:after, .arrow_box:before {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #88b7d5;
    border-width: 30px;
    margin-left: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}

Answer 3

No, there's no way to apply a shadow to that triangle. The shadow applies to a div, and divs are square. You could use an image or svg instead.

Or you could try this. Remove the shadow from the triangle and add this code.

#tri:after {
    content:'';
    position:absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid rgba(0,0,0,.25);
    width: 0;
    height: 0;
    top: -2px;
    right: -10px;
    z-index: -1;
}

I know it is not the same but, it's something.

Answer 4

try this

<div id="box">
  <div class="mask"></div>
<div id="tri"></div>

.mask{
    background-color:#ccc;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}