从特定区域移除CSS三角形和框阴影

Question

我有这个代码用于制作一个盒子并在左侧显示一个附加到它的三角形：

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;
    }

现在我想将阴影附加到整个元素上。所以我在三角形框和三角框内容类中添加了这段代码：

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

但是这会使阴影围绕框和三角形使它看起来像两个不同的div。我想从三角形和盒子相遇的区域中移除阴影。有没有办法做到这一点？

HTML：

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

Answer 1

我的时间有点长，但我会将它全部发布。这项技术将一个伪元素旋转45度，左下方阴影贴在箭头上。

<强> ---- ---- UPDATE

此技术不使用.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;
}

Working Demo

注意：我刚使用了-webkit-属性的transform前缀，您可以在实际实施中为其他浏览器添加更多前缀。

以下是我身边的样子：