三面阴影仅具有多个嵌入框阴影和Alpha透明度

Question

目标是让一个元素具有sublte inset box-shadow，其中底边不受任何阴影的影响。我试着玩弄阴影的价值，但没有运气。

更糟糕的是，颜色具有透明度，这意味着我不能简单地将三角形与元素重叠以隐藏阴影线。有什么想法吗？

＆＃13;

＆＃13;

.nav {
  background-color:rgba(0, 0, 0,.5);
}
.item {
  display:inline-block; margin-left:100px;
  position:relative; border-left: rgba(0,0,0,.8); border-right: rgba(0,0,0,.8);
  padding:5px 30px; background-color:rgba(10,36,53,.1);
  box-shadow:	inset 0 10px 20px 2px rgba(10,36,53,.1),
    inset 0px 0px 3px rgba(0,0,0,.1),
    inset  0px 0px 3px rgba(0,0,0,.1);
}

.triangle {
  border-top: 15px solid rgba(2,7,10,.55);
  border-left: 15px solid transparent; border-right: 15px solid transparent;
  position: absolute; bottom: -15px;
  margin-left: -15px; left:50%;
}

＆＃13;

<div class="nav">
  <div class="item">
    Hello World
    <div class="triangle"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以在阴影上使用垂直偏移...这样的事情可以起作用：

inset 0px 3px 3px rgba(0,0,0,.1);

DEMO

并且你可以在spread radius上使用负值，如果偏移使阴影伸得太远......就像这样：

inset 0px 3px 3px -1px rgba(0,0,0,.1);