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

【问题标题】：How do I make this shape in HTML?如何在 HTML 中制作这个形状？
【发布时间】：2021-05-25 22:51:43
【问题描述】：

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

【问题讨论】：

请附上您尝试过的内容。
方形 div 和矩形 div 的组合？矩形 div 有 border-radius: 20px 20px 0 0; 或类似的东西。 SVG 路线也是一种选择。
Canvas 或border-radius 的一些hack
欢迎来到 Stack Overflow。为了帮助我们帮助您，请提供minimal reproduceable example，以便我们为您提供帮助！
@thetechnician94 YT_Xaos Dudes 我不知道该怎么做，这就是我写这个问题的原因。我能做的最多的就是那个图像。

【解决方案1】：

我使用 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>

【讨论】：

这在小屏幕上看起来非常奇怪。 i.stack.imgur.com/rpqog.jpg
@WebDevNoob 只需根据您的选择更改 div 的高度和宽度，我的工作是使代码简洁易读，我仍然编辑了我的代码并在尺寸上做了一些更改

【解决方案2】：

单元素解决方案：

.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);
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

这应该是公认的答案。不能变得更干净

【解决方案3】：

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

/* 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>

【讨论】：

它在小屏幕上分解。 i.stack.imgur.com/pJFND.jpg
是的，那是因为我采用了固定尺寸，如图所示。通过使用@media，可以针对小型、中型和大型浏览器视图调整css宽度、高度和边框大小。在每个视图中正确尺寸的另一种方法是使用 vw（不是 px）作为尺寸单位。

【解决方案4】：

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

SVG 实现：

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

#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>

【讨论】：

【解决方案5】：

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

背景都是黑色的。

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

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

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

如果您将尺寸和定位设置为 %s，它将根据需要扩展或收缩。

【讨论】：