Hi,
I have come across a quite challenging situation. I sort of understand how to make all kinds of different shapes with CSS but what about when its a container with something inside that on top of that has a background like this:
(please see it on a black background for a better view)
as you may notice, its a list with radio buttons inside an irregular shape that has a semi-transparent image as the background. How to achieve this effect with CSS only? I dont think pseudo-elements will work at all because of the transparent background which has to be uniform all across the container and along the lines. It would look like a complete mess if I overlap pseudo-elements. Also, the left side borders have a totally transparent background. Any ideas please?
Thank you.
ul {
background: rgba(0, 0, 0, 0) url("back.png") no-repeat scroll 0 0;
border: 1px solid gray;
margin: 20px;
padding: 5px;
width: 100px;
}
li {list-style:none;}
ul::before {
border: 1px solid gray;
content: "";
display: block;
height: 124px;
margin: 0 0 0 -17px;
position: absolute;
top: 20px;
width: 5px;
}
ul::after {
border: 1px solid gray;
content: "";
height: 5px;
left: 28px;
position: absolute;
top: 150px;
width: 110px;
}<ul>
<li><input type="radio"> Option 1</li>
<li><input type="radio"> Option 2</li>
<li><input type="radio"> Option 3</li>
<li><input type="radio"> Option 4</li>
<li><input type="radio"> Option 5</li>
<li><input type="radio"> Option 6</li>
</ul>
