HTML：如何使用边框和框使用HTML和CSS制作这样的曲线

Question

<div style="position:absolute; color:#E0922F; border-style:solid; height:140px; width:360px; "></div>

请教我如何像使用css一样使直线的曲线居中

Answer 1

您可以尝试这样

.red-box{
  border:3px solid #E0922F;
  display:block;
  width:360px;
  height:140px;
  position:relative;
}
div.left {
  border: 3px solid #E0922F;
  display: inline-block;
  position:absolute;
  right:-3px;
  top:50px;
  border-right:3px solid #fff;
  background:#fff;
}
.left {
  height: 40px;
  width: 20px;
}


.left {
  border-bottom-left-radius: 90px;
  border-top-left-radius: 90px;
}

<div class="red-box">
  <div class="left"></div>
</div>

Answer 2

您可以将绝对定位的CSS Pseudo Elements like :after与border-radius和transform一起使用来产生这种效果。

对于带有“容器”类的html元素：

.container {
  position:relative;
  width:360px;
  height:140px;
  border:solid 4px #E0922F;
  background:#fff;
}
.container:after {
  content:'';
  position:absolute;
  top:50%;
  right:0;
  width:42px;
  height:42px;
  border:solid 4px;
  border-color:transparent transparent #E0922F #E0922F;
  border-radius:50%;
  background:#fff;
  transform:translateX(calc(50% + 4px)) translateY(-50%) rotate(45deg);
}

<div class="container"></div>

创建一个:after伪元素，该元素的宽度和高度均相对于.container绝对定位。

提供边框粗细，并将x的值与translateX(calc(50% + 4px))偏移相同的数量。也就是说，将元素沿X轴移动其宽度的50％，并将边框厚度添加到此计算位置。

使用top:50%将其向下移动到容器元素的中间，并使用translateY(-50%)将其居中。

将其border-radius设置为50％，以弯曲拐角并用border-color:transparent transparent #fc0 #fc0设置每个象限的颜色。

使用rotate(45deg)将元素旋转45度，以相对于容器元素的右边缘放置可见的边界象限的角。

此方法的主要缺点是伪元素必须具有背景色才能将容器隐藏在其下方。 This CodePen显示了一个有效的示例。如果您取消注释body背景色，则会发现此缺点。

但是，如果您不想太花哨并保持背景颜色一致，则可以模仿您想要的效果。

注意：如果您不想用right:-4px;混淆translateX(50%)，也可以使用transform和calc()来偏移边框的粗细。两种方法都可以达到相同的定位。

Answer 3

这是仅包含一个元素且较少代码的另一种方式：

.box{
  border:3px solid #E0922F;
  border-right:none;
  background:
    linear-gradient(#E0922F,#E0922F) right bottom/3px calc(50% - 24px) no-repeat,
    linear-gradient(#E0922F,#E0922F) right top/3px calc(50% - 24px) no-repeat,
    radial-gradient(circle at right,transparent 50%,#E0922F 50%,#E0922F calc(50% + 3px), transparent calc(50% + 4px)) right center/40px 55px no-repeat;

  width:360px;
  height:140px;

}

<div class="box">
  
</div>