Irregularly shaped container with background in CSS

Question

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>

Answer 1

You can also use multiple background-image, with either slices of your designed box (classic way) or gradients, or a mix of both eventually.

gradients idea example :

h3, ul,li {
  margin:0;
  padding:0;
  display:block;
}
h3 {
  text-indent:-20px;
}
div {
  width:100px;
  margin:1em 1em 3em;
  padding:5px 10px 5px 60px;
  background:
    linear-gradient(to right,  transparent 23px,
      gray 23px,  gray 29px, transparent 29px,transparent 34px, black 34px) 0 bottom no-repeat,
    linear-gradient(to right, gray 1px,  gray 6px,transparent 6px,transparent 10px, black 10px) 0 0 no-repeat,
    linear-gradient(to right, gray 1px, transparent 1px, transparent 5px, gray 5px, gray 6px,transparent 6px,transparent 11px, black 11px, black 12px, gray 12px) 0 0 no-repeat,
    linear-gradient(60deg, transparent 20px, gray 20px, gray 21px, transparent 21px, transparent 25px, gray 25px, gray 26px,transparent 26px, transparent 30px, black 30px, black 31px, gray 31px) 0 20px no-repeat,
    linear-gradient(to right,  transparent 23px,
      gray 23px, gray 24px, transparent 24px, transparent 28px,gray 28px, gray 29px, transparent 29px,transparent 34px, black 34px, black 34px, gray 35px) 0 61px no-repeat;
  
 background-size:100% 1px,100% 1px, 100% 20px ,100%  41px, 100% 100%;
  border-right:1px solid;
  position:relative;
  float:left;
}

div:after {
  content:'';
  position:absolute;
  top:100%;
  right:0;
  left:22px;
  margin-top:5px;
  height:16px;
  border-top:solid 1px;
  background:
    linear-gradient(to right,black 1px, gray 1px) 0 0 no-repeat,
    linear-gradient(-60deg,transparent 3px, black 3px, black 5px, gray 5px) top right no-repeat,
    linear-gradient(-60deg,transparent 24px, black 24px, black 25px, gray 25px) right 5px no-repeat,
    linear-gradient(60deg,transparent 3px, black 3px, black 4px, gray 4px) left 9px no-repeat,
    linear-gradient(-60deg,transparent 3px, black 3px, black 4px, gray 4px) 5px 9px no-repeat,
    linear-gradient(black,black) 0 5px no-repeat,
    linear-gradient(black,black) 0 9px no-repeat,
    linear-gradient(black,black) 3% 15px no-repeat;
    ;
  background-size:80% 9px, 40% 5px, 40% 4px, 20% 6px, 30% 6px, 97% 1px, 81% 1px, 29% 1px
  
}

body {
  background:yellow;

<div>
  <h3>Some options</h3>
  <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>
</div>
<div>
  <h3>Some options</h3>
  <ul>
  <li><input type="radio"> Option 1</li>
  <li><input type="radio"> Option 2</li>
  <li><input type="radio"> Option 3</li>
</ul>
</div>
<div>
  <h3>Some options</h3>
  <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>
  <li><input type="radio"> Option 7</li>
  <li><input type="radio"> Option 8</li>
</ul>
</div>

slice example:

h3, ul,li {
  margin:0;
  padding:0;
  display:block;
}

div {
  width:100px;
  margin:1em;
  padding:5px 5px 30px 40px;
  float:left;
  background:url(data:image/png;base64,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) top no-repeat,
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHIAAAAMCAYAAAC+9enMAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK6wAACusBgosNWgAAAB50RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNS4xqx9I6wAAAdhJREFUWIXlmFFuwyAMhn9D7jGp6xnW3mU73qRdpd0Z+rojrA/BwB42M0qaFCi0k/ZJqE0C2OGPHRzy3mOJ7Xb7stvtXolIybnN5ul5v39/A+ABuNXqkY/HzwdmdlpreO/BzLDWTpr3Hs65iR2lFIgISiloraGUmjS5TkQAACIKTY4B4NI95ZDO5b0PTY6dc+E3bdbak+tz96u1nrRhGMK9Cs45MDPGccQ4jjDGwDmH9Xr9cTgcop5XYq2FMaZqrCxa+j93zC2p8a+Vr8MwhKa1PrnWTEhmrhaylrkFiqO0Zs6lee+JUupEyFjMoZURYwyY+WK/pbSXLlSaOnO5JrXK2BKbc34S0awv3vtiGwBC6pUULjQTkpmDkLHz8XulhDlRS8a2sFtqpyZq0zWaE1nOi5DW2nCtaWpNX+qpcy04J/At6GW3ZI1kfeMUKzTd7FyiJK0uURKZvfrmstS39OGWXT/wK6bQTMjUqVYR+N9YWjcp6QCEMk1oJiSAyZa4lpwn/i+XH718EyHjqBQqhSQAcPj+IPB95qe4vZYe9det6O17/GEFaCLklDTUc7lUs+W8u3oLnmM//bpUOkcOUhnEUSk0E1Lqm3P02rHemx471yWk5IijUvgCasEsZvmyiy8AAAAASUVORK5CYII=) 16px 37px no-repeat,
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHIAAAAPCAYAAAA4YZtiAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK6wAACusBgosNWgAAAB50RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNS4xqx9I6wAABJtJREFUWIXtWM2O3EQQ/srdY3s8Mx7WywVFHCJFcAQlgPbOOyBF5MKTJFx4Bi5wQuKABAiuPECQuOQcRUoOHJB2Nzseezxuu6s4ZNryeOzZnbACBPtJrWnXVFfXT1e7yiQi2IeTk5MHjx8//mYf7c6dO+uLi4t3mbnK8xzWWjAz2rKJCJ7nwfM8KKW2hqN7ngciAhHt6CEiW8PJ73tu87v5ZXB7tvd387Zefc/79GXmZlhrt4aj9/lJKQWt9dbvaDQCgGZdXdc4Pj7+/enTp6QvtfCK0HoEQJDn+XWJvEEH7mDUdd0Mh2sLJBFA5CFJEojIzulrn8K6rneypH3ah0Y7G7pZ4WRcN7oZ3s20btZ1R/tmaNvqbBqNRjs3lFJqyy63R1VVW0G01jYyrxTIk5OTB+3n7lWb5/lP0+n0+Wv46QZ/EXme/wwAdJX3xw3+/fD+aQVu8PogIlJKvQnsyUit9REA3L59+/xv1O0GB6Kq6hcvXjz/cPAdycyVmz979uydMAzzOI5BREjTFKvVCr7vI45jjEYj5HmO5XIJz/MQxzHG4zGKokCapmBmzGYzTCYTVFWFNE1hjEEURZjNZgCANE1RFAV838d8PofWGlmWIcuyRmYYhliv143M6XSK6XSKuq6RpinKskQQBIjjGFprrFYrZFkGay2CIEAURfB9H0QEEYExBqvVCmVZQimF6XSKKIoG5R2iz2KxgDEG4/EYcRwDAJbL5bX5LY5jBEH4dZZlvwDIB69WEQlEJNjM8xZ9p+/p0p2jurQ+vjYvgKYabfeGrsLbHDCICIgISqmG5io413MxM4wxsNZCa40oihCGIYgIzAwiQhiGiKIIWmtYa2GMATM3vRuAptIG0FSTTjenr+d5W/q6qrRtb7cKHfKL4x3ic3SA3lJKfVQUq+8BFPsCeSYiZxtl3+gr7fcFp49vW5E+5bBjcB+t7RgXmHZwHc0FdzQawfd9iAhWq1Vzo4gIfN9vGm0XtLYcF6D2fkP27qN1/bXPP5cFfWPTp3Vd/VjX9ZmIyKXtx9nZ2aNbt2599/Lly/tEdHpIldtnxGV8Q7Qhxwx9venLcpel6/UaABCG4Va29/V8bflDB+9QW/rsAgCt9fthOP5yMpm8fXR0tMM7n8+bObPIel18XFVVDlyhjzw/P/88SRIkSfJtVVX3ReT0sjV9Sl7VmCHaUBa3PwZ0g+z+a1/Rvu8DAHzf37oSu2u6evTJ77OryzdkX9euIAjuzWbxV3VdfXF6unhijClEuCQiA6AUEWOtNSJSisAAsmbm5ovAlfvIJEkezmbxJ8aY+4vFxWlfYbJcLqGUwnw+RxAEzUtbRBDHMaIoQlXVs7Jcv6e1vjuZTO/6vv+B59Hu8fufwVq7zrLss8Vi8UNZluWh6w/6IJAkycPj4+NHh27SBrMUxpRPiqL4ra7rX0XkDxFha60wsxCRKKUEIGG2Yq0VIhLP85iIhFmE2QoARwcAsdbyJkOFiPiVaSzM3PASkQBoRhuveDzxPIKI8CaLeZOlAoDl1R9bsrbXk4gIO7rbZ8MLEeGNv7d4W/yvjZsvO/8R/AmjjxmyZJCjZQAAAABJRU5ErkJggg==) bottom  no-repeat;
  background-size:114px auto ,114px calc(100% - 52px);
  }
label {
  display:inline-block;
  background:gray;
  border-radius:100%;
  padding:0px 1px 2px 2px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK6wAACusBgosNWgAAAB50RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNS4xqx9I6wAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNS8yOS8xNrtVQFkAAAHBSURBVCiRXcvPbhJRGEDx89G5c+8MDFgp01RjLDQp2gZX7Czdie9hF/Z16Kr4Erhm1bBw40KMC9G0c2PiggkJprUWqjO9LvwT41mfn0RRhNYapRSP9/ZcvV5nfX0dgDRNsdbycjAQrTXGGDwRQUR4dnDg9vf3pfEfSKyl2Wy6o15PROQXeH546J52u7Kzs+s+nFr5aD8DUF2t0G63CYNARMT1j4/Fe9Ltuk6nI9vNB7x6/UbCMKRarSIiZN+vefvuPa3dh1wtFjKZTJy31Wiw1WhwmnyiWCwRlUqsrBTQvkLfilhcLUjTlD9foRbHxHHMl/NzKuUIoxVR0VApBUTFgNrabbIsJ45janGMx++0UoSBJtA+gfHxfR8RwTkoFkPyPCfPcwqz2YzZbMZadZWb7MffWSmFUgrnbohKJebzOfP5nIJNEs6ShHt377BcLlheXyMiAGRZRp7nhGHozpIEmyR4w+FQtptNFxgjrdYjLr5ecHn5DeUrlKcwxjAej2U0GrmTkxPxnHO86PcFcIvlUuqbm2xsbAAwnU5JrGU0GrmjXk+01ki5XEZrjed5dDodd/8fkE6nWGsZDAZijEFrzU8XuqnWNgsutQAAAABJRU5ErkJggg==) center no-repeat;
  background-size:90% 90%;
}
label input {
  display:block;
  margin:0;
  }

<div>
  <h3>options</h3>
  <ul>
  <li><label><input type="radio"/></label> Option 1</li>
  <li><label><input type="radio"/></label> Option 2</li>
  <li><label><input type="radio" checked/></label> Option 3</li>
  <li><label><input type="radio"/></label> Option 4</li>
  <li><label><input type="radio"/></label> Option 5</li>
  <li><label><input type="radio"/></label> Option 6</li>
</ul>
</div>
<div>
  <h3>Some options</h3>
  <ul>
  <li><input type="radio"> Option 1</li>
  <li><input type="radio"> Option 2</li>
  <li><input type="radio"> Option 3</li>
</ul>
</div>
<div>
  <h3>Some options</h3>
  <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>
  <li><input type="radio"> Option 7</li>
  <li><input type="radio"> Option 8</li>
</ul>
</div>

Answer 2

Svg solution

That shape is so spesial i would create a png file to use as its background.
Now if for some reason you cant have a png background, you could use an svg:

body {
  margin: 0;
  
}
.container {
  background-image: url("http://www.lorempixel.com/500/500/");
  position: relative;
  height: 300px;
  width: 200px;
  /*color: white; Looks reallly bad*/
}
.container svg {
  position: relative;
  height: 100%;
  width: 100%;
}
.container h3{
  position: absolute;
  left: 27%;
  top: 4%;
}
.container label {
  position: absolute;
  left: 32%;
  top: 30%;
}
.container label:nth-of-type(2) {
  top: 40%;
}
.container label:nth-of-type(3) {
  top: 50%;
}
.container label:nth-of-type(4) {
  top: 60%;
}
.container label:nth-of-type(5) {
  top: 70%;
}

<div class="container">
  <svg viewBox="0 -5 60 110">
    <path d="m10,0 50,0 0,90 -45,0 0,-60 -5,-10, 0,-20z" fill="#bbb" fill-opacity="0.9" stroke="black" />
    <path d="m0,0 0,20 5,10 0,60 5,0 0,-60 -5,-10, 0,-20" fill="none" stroke="#ccc"/>
    <path d="m5,93 55,0 -2.5,2.5, -2.5,0 -2.5,2.5 -43.5,0 -4,-2.5z" fill="#bbb" fill-opacity="0.9" stroke="black"/>
  </svg>
  <h3>Some content</h3>
  <label>
    <input type="radio" name="radioSelc" />Option 1</label>
  <label>
    <input type="radio" name="radioSelc" />Option 2</label>
  <label>
    <input type="radio" name="radioSelc" />Option 3</label>
  <label>
    <input type="radio" name="radioSelc" />Option 4</label>
  <label>
    <input type="radio" name="radioSelc" />Option 5</label>
</div>

Is a responsive shape, so it works with different sizes.
The aspect ratio is 2/3 so 0.66%.
height: 300px; -> 400px -> 600px etc
width: 200px; -> 266px -> 400px etc

Answer 3

You can do this with clip-path. The CSS is on line 302 onwards. Mae sure the clipped element is positioned absolute and keep in mind browser support is not the best. The are sandbox playgrounds to generate the paths, its quite easy.

  -webkit-clip-path: polygon(1% 3%, 3% 9%, 18% 21%, 54% 20%, 
  83% 63%, 66% 76%, 15% 83%, 25% 45%);

Link to Codepen, hover over the drinks:-)

http://codepen.io/damianocel/pen/KdobyK