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

Question

I want to draw this shape using HTML and CSS:

enter image description here

My problem is how to draw the 2 lines in left and in the right of green rectangle.

This is my attempt:

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

Thank you for help in advance.

There seems to be only one line below the green bar. Could you maybe post a slightly larger picture for better visualization? — Harry, Feb 18 '15 at 16:22
Essentially the same question as - http://stackoverflow.com/questions/23584120/line-separator-under-text-and-transparent-background — Paulie_D, Feb 18 '15 at 16:23
That image is better. It looks like you would have to use the approach posted by Daniel along with a bit of box-shadow for the lighter colored line at the bottom (or even border). — Harry, Feb 18 '15 at 16:29
@harry maybe they are not 2 lines, but the most important for me is to achieve this shape. I said that it's my attempt. t Thought that the best is to draw 2 lines but surely professionnal who deal with CSS have an other idea. — xtensa1408, Feb 18 '15 at 16:32

score 3 · Accepted Answer · answered Feb 18 '15 at 16:24

Use a pseudo-element like :before, also move the styles from cadre to style the span num.

Try this:

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

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

1 Answers1