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

Question

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

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

这是我的尝试：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

提前感谢您的帮助。

Answer 1

使用像pseudo-element这样的:before，同时将样式从cadre移到样式范围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>