javascript - 如何隐藏容器内 div 的短部分但显示另一个溢出部分

Question

是否可以隐藏容器内 div 的短部分，但显示另一个左侧部分溢出。

我的意思是你可以简单地设置 overflow至hidden在这种情况下隐藏从特定溢出的所有内容，我想要的是相反的。

代码:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
}

.magnifier {
  position: relative;
  top: 0;
  width: 30%;
  height: 200px;
  background: rgba(230, 230, 230, .1);
  border-radius: 10px;
  margin: 30px;
  box-shadow: inset 1px 0 rgba(225, 225, 225, .1), inset 1px 2px 6px 7px rgba(225, 225, 225, .1);
}

.inside {
  position: absolute;
  top: 50%;
  right: -6px;
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  background: rgba(230, 230, 230, .1);
}

<div class="container">
  <div class="magnifier">
    <div class="inside"></div>
  </div>
</div>

正如您在 div.magnifier 右侧的上述代码片段中看到的那样有div.inside 我只想显示外部部分看起来像一个箭头，但您会看到该 div 的所有部分都被显示。

我知道，当没有应用不透明度时，上述问题是不寻常的，但就我而言，我想要它，而且该问题不是由 inset 引起的上box-shadow .

如果有任何不同的方式可以做到这一点，我将不胜感激。

Answer 1

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
}

.magnifier {
  position: relative;
  top: 0;
  width: 30%;
  height: 200px;
  background: rgba(230, 230, 230, .1);
  border-radius: 10px;
  margin: 30px;
  box-shadow: inset 1px 0 rgba(225, 225, 225, .1), inset 1px 2px 6px 7px rgba(225, 225, 225, .1);
}

.inside {
  position: absolute;
  top: 50%;
  right: -15px;
  width: 15px;
  height: 15px;
  background: rgba(230, 230, 230, .1);
  clip-path: polygon(0 0, 50% 50%, 50% 50%, 0% 100%);
}

<div class="container">
  <div class="magnifier">
    <div class="inside"></div>
  </div>
</div>