如何在HTML中创建像下面的UI

Question

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

}`

我为网站页面设计了一个设计，我想使用HTML和CSS在标题中添加背景。在相同的背景中，我还添加了右侧，在这里我添加了我尝试过的CSS代码。

Answer 1

使用剪辑路径。该站点产生了一些数字。网站链接： https://bennettfeely.com/clippy/

Answer 2

您也可以使用伪元素和border css属性来做到这一点。

此处如何工作背后的理论示例： css triangles如何工作

strong> codepen链接： https://codepen.io/thechewy/thechewy/thechewy/pen/pen/pen/pen/pen/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>

Answer 3

这是您可能尝试或开始的方法：

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

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

替代选项是使用JavaScript库，甚至在HTML 5画布中使用。