如何连接两个div的box-shadow？

Question

我正在尝试使用两个div创建一个语音气泡，一个是三角形，另一个是矩形。

这是代码：

<link rel="stylesheet" href="<c:url value="/themes/style.css" />">

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

这个问题是在三角形连接到盒子的位置发生了某些事情。阴影不会围绕三角形。是否有可能解决这个问题，使阴影围绕盒子继续围绕三角形？

Answer 1

使用该技术，您将无法在三角形上放置阴影。

我们可以使用:after pseudo-element创建三角形，并使用:before伪元素创建主阴影框。

三角形

三角形看起来像钻石，盒子的背景与钻石重叠，使其看起来像一个三角形：

这：变为：

z-index: -1将伪元素放在父母背景下面。

主阴影

主阴影需要放置在伪元素上，以便它可以与三角形背景重叠，同时，三角形下半部分与元素背景重叠。此图显示了图层：

完整示例

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用此

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

不，没有办法将阴影应用于该三角形。阴影适用于div，div是正方形。你可以改用图像或svg。

或者你可以试试这个。从三角形中删除阴影并添加此代码。

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

我知道它不一样，但它是一些东西。

Answer 4

试试这个

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