如何使用CSS HTML在此形状中绘制这样的2行

Question

我想用HTML和CSS绘制这个形状：

我的问题是如何在绿色矩形的左侧和右侧绘制2条线。

这是我的尝试：

 .c{ width: 225px; float: left; padding: 13px; margin: 5px; border-width:2px; border-color:#777; border-style:solid; text-align: center; border-radius: 30px; } .c .cadre{ background: #60b000; width: 20px; height: 20px; border-radius: 3px; margin: 10px auto 0px; } .c .cadre .num{ font-size: 17px; margin-right: 2px; color: white; } 

 <h3> Commment ça marche</h3> <div class="c"> <h3> titre1 </h3> The element selector selects elements based on the element name. <div class="cadre"><span class="num">1</span></div> </div> 

提前感谢您的帮助。

Answer 1

使用像:before的pseudo-element ，也可以将样式从cadre移动到样式span num 。

尝试这个：

 .c { width: 225px; float: left; padding: 13px; margin: 5px; border-width: 2px; border-color: #777; border-style: solid; text-align: center; border-radius: 30px; } .c .cadre { position:relative; } .c .cadre .num { background: #60b000; border-radius: 3px; margin: 10px auto 0px; width: 20px; height: 20px; display:block; font-size: 17px; color: white; position:relative; z-index:10; } .c .cadre:before { content:" "; width:80%; position:absolute; height:5px; left:50%; top:50%; transform:translate(-50%, -50%); background:orange; } 

 <h3> Commment ça marche</h3> <div class="c"> <h3> titre1 </h3> The element selector selects elements based on the element name. <div class="cadre"><span class="num">1</span> </div> </div>