How to make text on a transparent strip using CSS? - html

Question

I wanted to make a text on a transparent strip with a colored strip on the left side. As in the picture below (the gray stripe should be transparent). The gray stripe would have to expand with the length of the text. If the text did not fit the width of the container, a new line would be created, and the orange bar and the gray bar would expand with the text (new line).
I was just starting to learn CSS and I wanted to achieve that, but I don't know how.

Answer 1

I made this small fiddle.
I've given background color to elements so that you can see how it acts based on amount of text. Change background-color to transparent on your h2 tag to get what you want.
HTML:
<div class="container">
<div class="label">
<h2 class="label-text">
Sample text
</h2>
</div>
</div>
and CSS:
.container {
width: 200px;
border: 1px solid Black;
background-color: gray;
}
.label {
background-color: white;
display: inline-block;
border-left: 10px solid red;
word-wrap: normal;
}
.label-text
{
display: inline-block;
padding-left: 10px;
}

Answer 2

Check this snippet:
#strip{
border: none;
}
#ribbon{
background-color: orange;
width: 15px;
height: 50px;
}
#strip-text{
padding-left: 20px;
background-color: #cccccc;
opacity: 0.6;
width: 185px;
height: 50px;
}
<table id="strip" cellspacing="0" cellpadding="0">
<tr>
<td id="ribbon">
</td>
<td id="strip-text">
EXAMPLE TEXT
</td>
</tr>
</table>
We have used CSS property opacity to add transparency to our strip.

Answer 3

Not sure what you've checked already (please share some code), but I think you want to use border CSS property, e.g.
border-left: 5px solid #ffdd00
EDIT:
Ok, since somebody downvoted this answer without clarification, I've realized by myself that probably OP is looking for total solution for his/her problem (so not only ribbon) - please check solution below then:
.ribbon {
color: #fff;
display: inline-block;
padding: 5px 10px;
border-left: 5px solid orange;
background: rgba(0, 0, 0, 0.25);
}
<div class="ribbon">Some text here</div>
You can achieve transparency by using rgba instead of opacity - it's supported by all modern browsers already.
This solution contains no hacks (or oldschool <TABLE> nodes!), requires only 1 element and is being widely supported by the browsers.