如何在 HTML 中创建如下所示的 UI

Question

.leftside {
padding: 16px;
background-color: #0E1E2B;
border-bottom-left-radius: 50%;

}`

我设计了一个网站页面，我想使用 HTML 和 CSS 在 header 中添加上面的背景。在相同的背景下，我还添加了它 right-side，这里我添加了我尝试过的 CSS 代码。我无法理解如何创建这样的背景！

Answer 1

使用clip-path。该站点生成一些数字。站点 link：https://bennettfeely.com/clippy/

Answer 2

以下是您可以尝试或开始的方法：

#shape {
  width: 200px;
  border-top: 120px solid #ec3504;
  border-left: 60px solid transparent;
}

<div id="shape"></div>

替代方案是使用 javascript 库，甚至在 Html 5 canvas.

中执行

Answer 3

您也可以使用伪元素和 border CSS 属性.

此处工作原理的示例：How CSS triangles work

Codepen link: https://codepen.io/thechewy/pen/eYVMLGM

.leftside {
  width: 18rem;
  height: 10rem;
  background: red;
  position: relative;
}

/** triangle **/

.leftside:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: 0;
  border-bottom: 10rem solid white;
  border-right: 100px solid transparent;
}

<div class="leftside"></div>

如何在 HTML 中创建如下所示的 UI

how to create UI like below in HTML

html

css

email-templates