如何使用 CSS HTML 以这种形状绘制这样的 2 条线

Question

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

我的问题是如何绘制绿色矩形左右两边的两条线。

这是我的尝试：

.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 移动到跨度 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>

如何使用 CSS HTML 以这种形状绘制这样的 2 条线

How can I draw such 2 lines in this shape using CSS HTML

html

css

css-shapes