从特定区域中删除 CSS 三角形和盒子阴影

Question

从特定区域中删除 CSS 三角形和盒子阴影

4

我有以下代码用于制作一个盒子并在左侧显示一个连接的三角形：

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

现在我想将阴影作为整体附加到该元素上。因此，我在triangle-box和triangle-box-content类中添加了以下代码：

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

- user1747648

1

你需要添加一些HTML代码，不过我可以猜测这似乎是不可能的。虽然渲染一些固定边框有点棘手但是可以做到，但我认为在这种情况下很难轻易地渲染盒子阴影。 - King King

我现在已经添加了HTML代码，以展示我如何使用这些类。你能想到其他任何方法来实现这个吗？ - user1747648

你可以轻松地使用SVG完成它。 - bjb568

很遗憾，我从未编写过任何SVG代码，因此不知道如何操作。CSS中没有其他可以做的事情吗？ - user1747648

2个回答

3

嗯，仍然有可能实现您想要的效果。思路是可以使用 :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;
}

演示效果

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

以下是我的屏幕截图：

enter image description here

- King King

它看起来有点模糊... - bjb568

FF 看起来很糟糕，但那只是厂商前缀的问题。在 Safari、Chrome 和 Opera 上看起来都一样，盒阴影的模糊效果会延伸到三角形中。 - bjb568

@King King：是的，我想要在元素周围有这种类型的阴影。非常感谢你！ :) - user1747648

1

@bjb568 请看我发的图片，我只能看到一点模糊，但我认为这是可以接受的。如果你这边比这严重得多，能否给我发一些截图让我看看？谢谢。 - King King

@bjb568 我认为这是因为对角线边缘的 box-shadow 中的 spread（为 3px）所致，或许模糊度的 3px 也有一定影响。 - King King

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

这个技巧使用伪元素将其旋转45度，并带有一个粘附在箭头上的左下阴影。 ----更新---- 这个技巧可以不使用 .triangle-box。

小提琴

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