无法删除重叠的盒子阴影 [英] Cannot remove overlapping box-shadow

问题描述

我试图去掉的两面纸 - 阴影 / code>框创建一个简单的箭头框，但我似乎无法摆脱它。我尝试删除位置：绝对，但似乎没有摆脱重叠的行为。

以下是我的html / css看起来像：

HTML：

 < div class = 内容容器 > 
< paper-shadow z =1> 
< div class =content> 
< h1> {{heading}}< / h1> 
< content>< / content> 
< / div> 
< paper-shadow class =trianglez =1> < /纸张阴影> 
< / paper-shadow> 
< / div> 
  

CSS：

 < code .content-container 
 flex：3 0 45％
 order：1 
 position：relative 
 
 .content，.triangle 
 background-color：#fafafa 
 
 .content 
 padding：20px 
 
 .triangle 
位置：绝对
高度：20px 
 width：20px 
 top：50％
 left：100％
 transform：translate（-50％，-50％）rotate（-45deg）
 >  $ b $>  box-shadow 来自 paper-shadow  code>： https：// www。 
 
 
 
 
 
正试图做的事情不能用CSS来完成，或者至少不会以你认为可以完成的方式来完成。如果你有两个盒子 - 阴影重叠的元素，而其中一个元素需要高于另一个元素（z-index），并且你无法从中删除重叠的偏好元素 - 元素的一半。
 
 
 
然而，通过渲染盒子阴影，然后用一个简单的矩形覆盖它以覆盖重叠的阴影，存在一种黑客方法。伪类最好这样做，但是只有当你使用的背景颜色对于两个元素都是相同的，并且你需要在你的元素中填充填充以便这个人造矩形不会与你的内容重叠时才有效。
 
 
 
  jsFiddle  
 
 
 
示例HTML：
 < div class =box> 
< div class =triangle>< / div> 
< / div> 
  
和CSS： 
 
 
  .box {
 background：white; 
 width：200px; 
 height：100px; 
 box-shadow：0px 0px 15px rgba（0，0，0，0.4）; 
职位：亲属; 
 padding：25px; 
} 
 .triangle {
 position：absolute; 
 height：20px; 
 width：20px; 
 top：50％;剩余
：100％; 
 transform：translate（-50％，-50％）rotate（-45deg）; 
背景：白色; 
 box-shadow：0px 0px 15px rgba（0，0，0，0.4）; 
} 
 .box：在{
位置：绝对; 
内容：''; 
背景：白色; 
 height：40px; 
 width：25px; 
 right：0; 
 top：50％; 
 margin-top：-20px; 
} 
  
 
More specifically, i'm using polymer paper-shadow.


I'm trying to remove two sides of a paper-shadow box to create a simple arrow box, but I can't seem to get rid of it. I've tried removing the position: absolute, but that doesn't seem to get rid of the overlapping behavior.



Here's what my html/css look like:

HTML:
  <div class="content-container">
    <paper-shadow z="1">
      <div class="content">
        <h1>{{heading}}</h1>
        <content></content>
      </div>
      <paper-shadow class="triangle" z="1"> </paper-shadow>
    </paper-shadow>
  </div>
CSS:
.content-container
  flex: 3 0 45%
  order: 1
  position: relative

  .content, .triangle
    background-color: #fafafa

  .content
    padding: 20px

  .triangle
    position: absolute
    height: 20px
    width: 20px
    top: 50%
    left: 100%
    transform: translate(-50%, -50%) rotate(-45deg)
The box-shadow comes from paper-shadow: https://www.polymer-project.org/docs/elements/paper-elements.html#paper-shadow
解决方案
What you are trying to do cannot be done using CSS, or at least not in the way you think it can be done. If you have two elements with box-shadow overlapping than one of them needs to be above the other (z-index) and there is no way you can remove overlapping partialy from let's say - half of an element.

However, there is a "hacky" way of doing this by rendering the box shadow as is and then covering it with a simple rectangle to cover an overlapping shadows. Pseudo classes are best to do that, but that only works if background color you are using is the same for both elements plus you need to have enaugh padding in your element so that this artificial rectangle doesn't overlap your content.

jsFiddle

Sample HTML:
<div class="box">
    <div class="triangle"></div>
</div>
And CSS:
.box {
    background:white;
    width:200px;
    height:100px;
    box-shadow:0px 0px 15px rgba(0, 0, 0, 0.4);
    position:relative;
    padding:25px;
}
.triangle {
    position: absolute;
    height: 20px;
    width: 20px;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%) rotate(-45deg);
    background: white;
    box-shadow:0px 0px 15px rgba(0, 0, 0, 0.4);
}
.box:after {
    position:absolute;
    content:'';
    background: white;
    height:40px;
    width:25px;
    right:0;
    top:50%;
    margin-top:-20px;
}


                        
这篇关于无法删除重叠的盒子阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！