如何在 HTML 中制作这个形状？

Question

我正在尝试用 HTML/CSS 制作这个形状，但我一辈子都做不到。 如果有人能提个醒，将不胜感激。 包括JS也没关系。 如果您能在正确的方向上做出最小的推动，我将不胜感激。 谢谢，图来了

Answer 1

创建几个 div，一个是大位的宽度和高度，一个是宽度为半圆直径的正方形。

两个黑色的背景。

Big bit 的边界半径大约为 10%，四处寻找你想要的东西，在顶角，在底角为 0。

半圆其实就是一个圆，边界半径为50%。 Position 绝对内大位。

警告，有时边界半径可能会产生不太平滑的光洁度。 如果这是一个问题，您可以尝试 SVG，但您的问题规定了 HTML 和 CSS。

如果您制作尺寸和定位 %s，它将根据需要扩展或收缩以适应。

Answer 2

我使用 vh 和 % 单位使其具有响应性。只是一个小代码和响应性。

这对你有用。

 * { margin: 0px; padding: 0px; } body { display: flex; justify-content: center; align-items: center; } div { position: relative; display: flex; justify-content: center; margin-top: 10%; padding-top: 40%; width: 40%; background: black; border-radius: 14% 14% 0 0; } p { display: block; content: ""; position: absolute; width: 10%; padding-top: 10%; margin-top: -28%; background: black; border-radius: 50%; }

 <div></div> <p></p>

Answer 3

一元解决方案：

 .box { width: 200px; height: 200px; margin-top: 40px; border-radius: 20px 20px 0 0; background: black; }.box::before { content: ""; display: block; width: 50px; height: 50px; background: inherit; border-radius: 50%; margin: auto; transform:translateY(-20px); }

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

Answer 4

*只是为了补充使用 HTML/CSS 通过<div>实现的其他答案，下面是 SVG 方法：

SVG 实现：

可以使用许多设计工具（如 Figma、Vectornator 和 Illustrator）创建并导出为内联 SVG 代码。 或者通过手动输入坐标和路径，这是一个相当漫长的过程。 按下面的蓝色运行代码片段按钮以查看结果并使用完整页面链接测试响应能力：

 #Shape { position: absolute; --Width: 60%; --Height: 80%; width: var(--Width); height: var(--Height); top: calc(50% - var(--Height)/2); left: calc(50% - var(--Width)/2); }

 <svg id="Shape" viewBox="0 0 374 381" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M248.434 46H334C356.092 46 374 63.9087 374 86V381H0V86C0 63.9087 17.9082 46 40 46H125.566C133.342 19.417 157.903 0 187 0C216.097 0 240.658 19.417 248.434 46Z" fill="rgba(30,28,33,1)"/> </svg>

Answer 5

您可以使用标准 css：边界（中间跨度）和边界半径（左右跨度）。 如果您希望徽标变小或变大，请更改尺寸。

 /* some default css so other css in your project will not interfere */ #logo span { box-sizing: border-box; margin: 0; padding: 0; border: 0; display: inline-block; background-color: black; } /* below the css for the logo */ #logo.l, #logo.r { width: 160px; height: 420px; } #logo.l { border-top-left-radius: 45px; } #logo.r { border-top-right-radius: 45px; } #logo.m { width: 0; height: 475px; border: 55px solid black; border-top-left-radius: 55px; border-top-right-radius: 55px; }

 <div id="logo"> <span class="l"></span><span class="m"></span><span class="r"></span> </div>