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 with border-radius and transform 通常创建此效果。

对于 class 为 "container" 的 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%).

将其居中

给它一个 50% 的 border-radius 来弯曲角落，并用 border-color:transparent transparent #fc0 #fc0 设置每个象限的单独颜色。

将元素旋转 45 度，使可见边框象限的角相对于容器元素的右边缘定位 rotate(45deg)。

此方法的主要缺点是伪元素必须具有背景色才能隐藏其下方的容器。 This CodePen 显示了一个工作示例。如果您取消注释 body 背景颜色，您会看到这个缺点。

但是，如果您不想太花哨并保持背景颜色一致，这看起来可以模拟您正在寻找的效果。

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

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>

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

HTML : How to make a curve like this using HTML & CSS using border or box

html

css

border