CSS triangle and removing shadow shadow from a specific area

Question

I have this code to create a window and to illustrate the triangle attached to it on the left side:

CSS:

    .triangle-box{

     width: 0;
     height: 0;
     margin-top: 10px;
     border-top: 15px solid transparent;
     border-right: 15px solid #fff;
     border-bottom: 15px solid transparent;
     float:left;

    }

    .triangle-box-content{

     background-color: white;
     -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
     border-radius: 2px;
     border-bottom-color: #989898;
     height: 140px;
     width: 530px;
     float:left;
     text-align: left;
    }

Now I want to apply a shadow to this element as a whole. Therefore, I added this code to the triangle and triangle fields:

    -webkit-box-shadow: 0 0 3px 5px #7a7a7a;
    -moz-box-shadow:  0 0 3px 5px #7a7a7a;
     box-shadow:  0 0 3px 5px #7a7a7a;

But this makes the shadow go around the box, and the triangle makes it look like two different divs. I want to remove the shadow from the area where the triangle and the field meet. Is there any way to do this?

HTML:

    <div class="triangle-box"></div>
    <div class="triangle-box-content"></div>

Answer 1

I was a little longer, but I will publish it anyway. This technique rotates the pseudo-element 45 degrees with the bottom left shadow that adheres to the arrow.

---- ----

.triangle-box.

---

FIDDLE

HTML:

<div class="triangle-box-content"></div>

CSS:

.triangle-box-content:before, .triangle-box-content:after{
    content:"";
    position:absolute;
    background:#fff;
}

.triangle-box-content:before {
    z-index:-1;
    top:13px;
    left:-10px;
    height:25px;
    width:25px;
    -moz-box-shadow: -5px 5px 5px 0px #7a7a7a;
    -webkit-box-shadow: -5px 5px 5px 0px #7a7a7a;
    -o-box-shadow: -5px 5px 5px 0px #7a7a7a;
    box-shadow: -5px 5px 5px 0px #7a7a7a;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}
.triangle-box-content {
    height: 140px;
    width: 530px;
    float:left;
    margin-left:50px;
    text-align: left;
    position:relative;
}
.triangle-box-content:after {
    width:100%;
    height:100%;
    z-index:-2;
    left:0;
    top:0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 3px 5px #7a7a7a;
    -moz-box-shadow: 0 0 3px 5px #7a7a7a;
    box-shadow: 0 0 3px 5px #7a7a7a;
}

Answer 2

, . , :before :after , (45 ° -45 °) . :

.triangle-box{
  width: 0;
  height: 0;
  margin-top: 10px;
  border-top: 15px solid transparent;
  border-right: 15px solid #fff;
  border-bottom: 15px solid transparent;
  float:left; 
  /* note these are added to your original CSS */
  position:relative;
  z-index:1;
}
.triangle-box:before {
  content:'';
  display:block;
  width:17px;
  height:0px;    
  box-shadow: 0 -4px 3px 3px #7a7a7a;
  -webkit-transform:rotate(-45deg) translateY(2px);
  -webkit-transform-origin: left top;
  top:50%;
  position:absolute;    
}

.triangle-box:after {
  content:'';
  display:block;
  width:17px;
  height:0px;    
  box-shadow: 0 4px 3px 3px #7a7a7a;
  -webkit-transform:rotate(45deg) translateY(-2px);
  -webkit-transform-origin: left top;
  top:50%;
  position:absolute;
}

. -webkit- transform, .

: