如何在 HTML 中制作此形状？

Question

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

Answer 1

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

背景均为黑色。

Big bit 的 border-radius 大约为 10%，玩弄以获得你想要的东西，在顶角，0 在底角。

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

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

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

Answer 2

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

SVG 实现：

可以使用 Figma、Vectornator 和 Illustrator 等多种设计工具创建，并导出为内联 SVG 代码。或者手动输入坐标和路径，这是一个相当漫长的过程。按下面的蓝色 运行代码片段 按钮查看结果并使用整页 link:

测试响应能力

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

Answer 4

我使用 vh 和 % 单位使其 responsive.Just 成为一个小代码并且响应迅速。

这对你有用。

* {
  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 5

一元解法：

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

如何在 HTML 中制作此形状？

How do I make this shape in HTML?

html

css

shapes

css-shapes

SVG 实现：

这对你有用。