如何在曲线框html和css中添加垂直线分割和图例？
Posted
技术标签:
【中文标题】如何在曲线框html和css中添加垂直线分割和图例？【英文标题】：How to add vertical line division and legend in curve box html and 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 的新手！请帮我写代码！谢谢！
【问题讨论】：
【参考方案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 等教程网站上阅读这些内容。然后，如果您有任何问题，请发送您的数据，这里的人会帮助您。
【讨论】：
以上是关于如何在曲线框html和css中添加垂直线分割和图例？的主要内容，如果未能解决你的问题，请参考以下文章
Matlab中给ｆｉｇｕｒｅ添加图例（legend），标题（ｔｉｔｌｅ）和颜色（ｃｏｌｏｒ）
ArcGIS微课1000例0032：ArcGIS中河流（曲线）湖泊（水体色）图例制作案例教程