如何在曲线框html和css中添加垂直线分割和图例？
sodmzs1
我有此图像，我想将此框分为三个部分，并且需要一个图例，就像它在图像中的样子一样。
以下是我到目前为止所做的代码，但实际上对垂直线（顶部和底部之间的空间）以及带有曲线边框的顶部图例不了解。
<!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的新手！请帮助我的代码！谢谢！
PythonicSpeaker
试试这个：
<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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用html和CSS在texbox中添加垂直线
- 2
如何在ggplot2中为带有图例的垂直线添加标签
- 3
如何在quantmod中添加多条垂直线？
- 4
如何在单个ggplot2中对齐图层（密度图和垂直线）
- 5
如何为MATLAB错误栏图的点和垂直线设置不同的图例？
- 6
如何为MATLAB errorbar图的点和垂直线设置不同的图例？
- 7
如何在散点图中将固定的水平线和垂直线添加到散点图中
- 8
如何在UITableViewCell IOS之间添加垂直线
- 9
如何在网格项目之间添加垂直线？
- 10
密谋：如何在指定点添加垂直线？
- 11
绘图：如何在绘图中添加垂直线？
- 12
如何使用风险表（R）向生存图添加垂直线和注释
- 13
如何在gnuplot中添加3D绘图上的垂直线？
- 14
如何在 d3js 中向条形字符添加垂直线？
- 15
如何在文本框中添加垂直线以分隔元素
- 16
如何在格子面板中添加多条垂直线？
- 17
如何使用CSS使HTML元素显示在垂直线上？
- 18
如何删除水平线和垂直线
- 19
如何使用HighStocks或HighCharts在图表中添加垂直线？
- 20
如何在MATLAB中绘制水平和垂直线？
- 21
如何在Vim中的括号之间绘制垂直线？
- 22
如何在Swing中绘制垂直线
- 23
如何在SVG中绘制垂直线
- 24
如何根据JTree中的图标大小调整垂直线和子节点的位置？
- 25
对于一组点线图和垂直线图有单独的图例
- 26
在绘图ggplot中添加垂直线
- 27
无法在抖动中添加垂直线
- 28
如何在按钮右侧添加一条垂直线，以使该线出现在搜索栏和该按钮之间
- 29
在CSS中显示垂直线
我来说两句