如何在 HTML 中制作此形状？ 这对你有用

问题描述

我正在尝试在 HTML/CSS 中制作此形状，但我终生无法做到。如果有人可以提供提示，将不胜感激。包括JS也无所谓。如果你能在正确的方向上做出最小的推动，我将不胜感激。 谢谢，这是图纸。

解决方法

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

黑色背景。

Big bit 有大约 10% 的边界半径，可以随意调整以获得你想要的，在顶角，0 在底角。

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

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

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

,

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

,

一个元素的解决方案：

extension Button {
    func onTapEnded(_ action: @escaping () -> Void) -> some View {
        buttonStyle(ButtonPressHandler(action: action))
    }
}

struct ContentView: View {
    var body: some View {
        Button(action: {
            print(">> tap up")
        }) {
            Image(systemName: "piano-white-key")
        }
        .onTapEnded {
            print("<< tap down")
        }
    }
}

,

*只是为了补充其他答案，这些答案通过 <div> 使用 HTML/CSS 实现，下面是一种 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>

,

您可以使用标准 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>