Question

如上图所示，这是一个跨页面宽度的半圆，其中包含文本WATCH IT FIRST。因此，在长时间使用border-radius值进行测试之后，我无法实现此特定形状。我很累，这并不是一个完美的半曲调。它被拉长了，我不知道如何实现那种外观。任何帮助都是如此，非常感谢。谢谢。

编辑：我发现了很多关于半圆形的问题，但没有拉伸。

Answer 1

div {
    background: transparent;
    width: 400px;
    height: 40px;
    margin-top: 70px;
    z-index: 1;
    position: relative;
}

div:after{
    content: "CONTENT GOES HERE";
    color: white;
    text-align: center;
    position: absolute;
    height: 100px;
    left: 0px;
    right: 0px;
    bottom: 100%;
    background-color: black;
    border-bottom-left-radius: 50% 70px;
    border-bottom-right-radius: 50% 70px;
    clip: rect(0px, 400px, 100px, 0px);
}

<div></div>

来源：Negative borders (css)

您需要的是border-bottom-left-radius和border-bottom-right-radius。只需根据高度将它们设置为50％或任何您的要求，即可使其成为理想的半圆。

我真的没有收到你的问题，但是我认为这就是你在说的。

Answer 2

您可以将radial-gradient视为背景：

.box {
  color:#fff;
  text-align:center;
  font-size:20px;
  width:300px;
  height:80px;
  background:
    radial-gradient(circle at top,red 34%,transparent 34.5%) 50% -133px/380% 271% no-repeat;
}

<div class="box">
Some content
</div>

Answer 3

当前的答案对我来说都没有真正的作用，因为红色的半圆形会出现在div中，并且我一直无法与其他孩子相撞。但是在调整了Lorddirt的答案之后，我得以使它生效。

.red-banner {
    background: #dc3545;
    color: white;

    width: 100%;
    height: 120px;
    border-bottom-left-radius: 50% 120px;
    border-bottom-right-radius: 50% 120px;

    font-size: 3.2rem;

    padding-top: 20px;
}

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
</head>

<body>
<div class="bg-white text-center">
    <div class="red-banner">WATCH IT FIRST</div>
</div>
</body>
</html>

Semi Circle与CSS中的文字一样，如图片所示？

3 个答案: