Question

我正在制作一个css片段，我需要在div的顶部渲染一个圆圈。我必须用边界半径做到这一点。

但是我希望得到更平滑的曲线，所以我必须增加宽度并使用左值对齐它。但现在我在页面中得到一个水平滚动条。有没有办法避免水平条。我试图溢出价值，这似乎没有帮助。

PS：这是用于＆lt; 700px媒体查询。

#semi-circle {
    height: 70%;
    width: 180%;
    border-radius: 235px 235px 0 0;
    -moz-border-radius: 235px 235px 0 0;
    -webkit-border-radius: 500px 500px 0 0;
    background-color: red;
    top: 157px;
    margin-right: 0;
    left: -215px;
    overflow: auto;
}

https://jsfiddle.net/5oorwmxd/1/

Answer 1

您需要将div包装为另一个，然后overflow-hidden包装元素。例如：

https://jsfiddle.net/5oorwmxd/3/

CSS：

.wrapper{
  overflow:hidden;
  width:100%;
}

HTML：

<div class="wrapper">
  <div id="semi-circle">test</div>
</div>

Answer 2

你能把它放在100％宽度和隐藏溢出的容器中吗？

<div class="container">
     <div id="semi-circle">test</div>
</div>

和CSS

.container {width:100%; overflow:hidden;}

https://jsfiddle.net/6q8nndzL/

Answer 3

要实现您的目标，您只需使用border-top-left-radius属性，而不是使用速记border-radius。

jsFiddle

CODE SNIPPET

#semi-circle {
  background-color: tomato;
  padding-left: 15px;
  transition: border-top-left-radius 1s ease-in;
}
@media (max-width: 700px) {
  #semi-circle {
    border-top-left-radius: 235px;
  }
}

<div id="semi-circle">test</div>

备注：

您的代码中有几个问题。

首先，如果元素的位置是静态的，则不能设置top，left，right或bottom值，这是每个元素的默认位置值。所以只需删除这些属性。

其次，使用高度百分比要求元素的父级具有已定义的高度，在这种情况下它不会，因此将其删除。

无需增加width，也无需将margin-right设置为0。

div宽度大于100％并将溢出部分隐藏在视口之外

3 个答案: