Question

基本上我正在尝试创建一个六边形的形状，其内部会有一个圆圈，并且应该隐藏圆形的额外部分。演示：https://codepen.io/AskSaikatSinha/pen/jwXNPJ?editors=1100

我的HTML：

<div class="container">
  <div class="radius-rect"></div>
  <div class="hex">
    <div id="hexagon" >
      <div class="semi-cir" ></div>
    </div>
  </div>  
</div>

我的CSS：

#hexagon {
    width: 100px;
    height: 55px;
    background: #0088CD;
    position: absolute;
  border-top: 1px solid #0088CD;
  border-bottom: 1px solid #0088CD;
  border-radius: 2px;

}
#hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #0088CD;
  border-radius: 2px;

}
#hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #0088CD;
  border-radius: 2px;
}
.semi-cir{
  position: relative;
  left: 10px;
  background-color:#00A9F1;
  height:100px;
  width:100px;
  -webkit-border-radius:75px;
  -moz-border-radius:75px;
  z-index: 1;
  overflow: hidden;
}

溢出：隐藏没有任何影响。

Answer 1

通过MDN查看definition of the overflow属性：

溢出CSS属性指定当它的块级容器太大时剪辑内容，显示滚动条或显示溢出内容。

（...）


隐藏：如果需要，内容会被剪裁以适合内容框。没有提供滚动条。

剪辑元素的内容。 background，border等属性是元素的部分，因此不会被剪裁。您必须在父级（overflow: hidden）上应用#hexagon以隐藏超出子级的内容（.semi-cir）。

然而，我不知道你要准确呈现什么。如果您只是想要一个类名称建议的“半圆”，您可以将整个圆圈包裹在overflow的父级中，其大小足以隐藏其中一半。

如果您将内部的设置为六角形，并且具有非线性分离，则可以堆叠上述几个“圆形部分”。

但所有这一切都明确地过度设计，而overflow不是正确的属性。您可以查看为此用例制作的clip和clip-path属性。


剪辑CSS属性定义元素的哪个部分可见。 clip属性仅适用于绝对定位的元素，即position：absolute或position：fixed。
的元素
- https://developer.mozilla.org/en/docs/Web/CSS/clip

剪辑路径CSS属性通过定义要显示的剪辑区域来防止元素的一部分显示，即，仅显示元素的特定区域。剪切区域是指定为引用内联或外部SVG的URL的路径，或者是诸如circle（）之类的形状方法。 clip-path属性替换现在已弃用的剪辑属性。

- https://developer.mozilla.org/en/docs/Web/CSS/clip-path

以下是一篇很棒的文章：

https://css-tricks.com/clipping-masking-css/

https://www.html5rocks.com/en/tutorials/masking/adobe/

但是，请注意浏览器支持。 clip已弃用，clip-path为not supported by IE and Edge。

Answer 2

尝试给出与'semi-cir'相同的背景颜色。同样的技巧适用于您提供的链接：https://codepen.io/AskSaikatSinha/pen/jwXNPJ?editors=1100

#hexagon {
    width: 100px;
    height: 55px;
    background: #0088CD;
    position: absolute;
    top:50px;
    left:50px;
  border-top: 1px solid #0088CD;
  border-bottom: 1px solid #0088CD;
  border-radius: 2px;

}
#hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #0088CD;
  border-radius: 2px;

}
#hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #0088CD;
  border-radius: 2px;
}
.semi-cir{
  position: relative;
  left: 10px;
  background-color:#00A9F1;
  height:100px;
  width:100px;
  -webkit-border-radius:75px;
  -moz-border-radius:75px;
  z-index: 1;
  overflow: hidden;
}
.radius-rect{
  height:200px;
  background:#00a9f1;
}

<div class="container">
  <div class="radius-rect"></div>
  <div class="hex">
    <div id="hexagon" >
      <div class="semi-cir" ></div>
    </div>
  </div>  
</div>

溢出：隐藏属性在伪类之后和之前不起作用

2 个答案: