如何在曲线框html和css中添加垂直线分割和图例？答案

【问题标题】：How to add vertical line division and legend in curve box html and css?如何在曲线框html和css中添加垂直线分割和图例？
【发布时间】：2021-05-17 06:34:10
【问题描述】：

我有这张图片，我想把这个盒子分成三个部分，并且需要在顶部有一个图例，就像它在图片中的样子。

以下是我到目前为止所做的代码，并且实际上不知道垂直线（顶部和底部之间的空间）和顶部带有曲线边框的图例。

<!DOCTYPE html>
<html>
<head>
<style>

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 650px;
  height: 150px;  
}

</style>
</head>
<body>

<p id="rcorners2"></p>


</body>
</html>

我是 HTML CSS 的新手！请帮我写代码！谢谢！

【问题讨论】：

标签： javascript html css forms bootstrap-4

【解决方案1】：

试试这个：

<html>
<head>
<style>
  .wrapper {
  width: 650px;
  height: 150px; 
    position: relative;
  } 
  .legend {
    position: absolute;
    height: 20px;
  border-radius: 25px;
  border: 2px solid #73AD21;
    width: 30%;
    top: 0;
    background-color: white;
    left: 35%;
  }
#rcorners2 {
  top: 10px;
  position: relative;
  display: flex;
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
  height: 150px; 
  box-sizing: border-box;
}
  
  .line {
    box-sizing: border-box;
    height: 100%;
    flex: 1 1 auto;
    border-left: 2px solid green;
  }
  .line:first-child {
    border-left: none;
  }


</style>
</head>
<body>
<div class="wrapper">
  <div id="rcorners2">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <div class="legend"></div>
</div>


</body>
</html>

【讨论】：

不客气 :) 但我强烈建议您学习一些 html-css 理论：尤其是关于定位、显示属性以及填充和边距的知识。如果你需要任何关于我写的布局的解释，你也可以问我;）

【解决方案2】：

您应该阅读更多关于 padding 的信息，以了解上面主框周围的空白。
同样对于上面的曲线框，你应该使用position: absolute作为子框，这里是曲线框，position: relative作为它的父框，它是主框。对职位有帮助
对于圆角，您应该使用border-radius。

由于您是新的贡献者，请在 w3schools.com 等教程网站上阅读这些内容。然后，如果您有任何问题，请发送您的数据，这里的人会帮助您。

【讨论】：