不规则形状的容器与CSS中的背景

时间：2016-05-29 07:48:24

标签： css background-image css-shapes

您好，

我遇到了一个非常具有挑战性的情况。我有点理解如何使用CSS制作各种不同的形状，但是如果它的内部有一个容器，那么它的背景如下：

enter image description here

（请在黑色背景上看到它以获得更好的视图）

正如您可能已经注意到的那样，它的列表中有一个不规则形状的单选按钮，其中半透明图像作为背景。如何只用CSS实现这种效果？我不认为伪元素会起作用，因为透明背景必须在整个容器和整个线条上均匀。如果我重叠伪元素，它看起来就像一团糟。此外，左侧边框具有完全透明的背景。有什么想法吗？

谢谢。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

Svg解决方案

这种形状非常特别，我会创建一个png文件作为背景 现在如果由于某种原因你不能拥有png背景，你可以使用svg：

＆＃13;
＆＃13; 
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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

是一种反应灵敏的形状，所以它适用于不同的尺寸 纵横比为2/3，因此为0.66％ 身高：300px; - ＆GT; 400px - ＆gt; 600px等
宽度：200px; - ＆GT; 266px - ＆gt; 400px等

答案 1 :(得分：1)

您还可以使用多个背景图像，使用您设计的方框（经典方式）或渐变，或最终两者的混合。

渐变的想法示例：

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>

切片示例：

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>

答案 2 :(得分：0)

您可以使用剪辑路径执行此操作。 CSS在302行以上。 确保剪裁的元素位于绝对位置并牢记浏览器支持并不是最好的。 是沙箱游乐场，以产生路径，这很容易。 

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

链接到Codepen，将鼠标悬停在饮料上： - ）

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

相关问题
最新问题