时间戳

首页 > 解决方案 > 如何隐藏容器内的 div 的一小部分但显示另一个溢出部分

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

问题描述

是否可以隐藏容器内的 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 的所有部分都被显示。

我知道当没有应用不透明度时，上述问题是不寻常的，但在我的情况下，我想要它，而且问题不是由inseton引起的box-shadow。

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

标签： javascripthtmlcss

解决方案

您可以使用 clip-path 功能来实现相同的目的。我尝试了这些值并得到了我想你需要的东西。在课堂内添加这个。

clip-path:polygon(0 0,100% 0 ,100% 100%,90% 100%); 


  * {
      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: -8px;
      width: 15px;
      height: 15px;
      background: rgba(230, 230, 230, .1);
      transform: rotate(45deg);
     
      clip-path:polygon(0 0,100% 0 ,100% 100%,90% 100%); 
}
    <div class="container">
      <div class="magnifier">
        <div class="inside"></div>
      </div>
    </div>

推荐阅读