元素

时间：2015-12-26 00:48:11

标签： css css3 svg css-shapes

我需要创建如下图所示的内容：

enter image description here

其中：

  • 黑色背景代表页面上的元素，例如header
  • 青色背景代表黑色背景下的整体背景
  • 黑色背景元素必须像单个元素一样处理，因为它上面会有一个图案叠加，它必须保持在黑色元素的边框内，而不会出现在它的外面

用一些:pseudo-elements创建黑色元素会非常容易，但是在它之上的那个模式已经让整个事情陷入停滞。

我一直在阅读clip-path道具。但我不确定我是否能够像这样创建一个复杂的剪辑（或者对我来说似乎很复杂）。

整个内容将用于iOS应用程序，到目前为止，这个剪辑路径属性似乎与它兼容。 另外要提到的是，黑色元素将具有固定高度，但必须是其父级的 100％宽度。 我认为我会使用svg代替，但因为它需要一个固定的高度，所以当它被拉伸时似乎是扭曲的。

更新 右侧必须保持相同的宽度，我想可能在<g>标签内使用两个svgs并且绝对定位它们，一个是流体而另一个是固定宽度。但是，我不确定filter是否会覆盖它们，或者filter是否可以应用于<g>标记，svg内部

下面的SVG示例：

body {
  background: cyan;
}
svg {
  min-width: 100%;
  height: 80px;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 452 170" preserveAspectRatio="none">
  <rect x="1" y="14" width="438" height="142" />
  <path d="M0 0v170h452V0H0zM448 166H4V4h444V166z" />
  <rect y="14" width="438" height="142" />
</svg>

非常感谢任何提示或指示！

2 个答案:

答案 0 :(得分：6)

可能是一个更好的解决方案吗？

＆＃13;
＆＃13; 
#test {
  font-size: 100px;
  position: relative;
  display: inline-block;
  margin: 40px;
}

#test:after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: -1;
  background: repeating-linear-gradient(45deg, lightblue, tomato 100px);
  -webkit-mask-image: linear-gradient(red, red),
                    linear-gradient(red, red), 
                    linear-gradient(red, red), 
                    linear-gradient(red, red), 
                    linear-gradient(red, red), 
                    linear-gradient(transparent, transparent);
  -webkit-mask-size: 5% 100%, 5% 100%, 100% 5%, 100% 5%, 80% 80%;
  -webkit-mask-position: left top, right top, center top, center bottom, center center ;
  -webkit-mask-repeat: no-repeat;
}

body {
  background-color: lightgreen;
}
＆＃13; 
<div id="test">Transparent frame</div>
＆＃13;
＆＃13;
＆＃13;

固定宽度方法

使用固定值（以像素为单位）替换边框宽度的尺寸。使用calc作为内部矩形。

＆＃13;
＆＃13; 
body, html {
    width: 90%;
  position: relative;
}

#test {
  font-size: 100px;
  position: relative;
  display: inline-block;
  margin: 40px;
  width: 100%;
  height: 40%;
}

#test:after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: -1;
  background: repeating-linear-gradient(45deg, lightblue, tomato 100px);
  -webkit-mask-image: linear-gradient(red, red),
                    linear-gradient(red, red), 
                    linear-gradient(red, red), 
                    linear-gradient(red, red), 
                    linear-gradient(red, red), 
                    linear-gradient(transparent, transparent);
  -webkit-mask-size: 10px 100%, 10px 100%, 100% 10px, 100% 10px, calc(100% - 40px) calc(100% - 40px);
  -webkit-mask-position: left top, right top, center top, center bottom, center center ;
  -webkit-mask-repeat: no-repeat;
}

body {
  background-color: lightgreen;
}
＆＃13; 
<div id="test">Transparent frame</div>
＆＃13;
＆＃13;
＆＃13;

一个省略的例子

＆＃13;
＆＃13; 
#test {
  font-size: 100px;
  position: relative;
  display: inline-block;
  margin: 40px;
  border-radius: 50%;
}

#test:after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: -1;
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, lightblue, tomato 100px);
  -webkit-mask-image: radial-gradient(ellipse, red 55%, transparent 56%, transparent 65%, red 66%);
}

body {
  background: lightgreen;
}
＆＃13; 
<div id="test">Transparent frame</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：6)

这可以通过在此CSS Tricks article中使用Ana描述的方法来实现。

使用CSS剪辑路径：

我们需要做的就是使用polygon进行裁剪，如下面的代码段所示，并将其应用到容器上。这样的路径会在最外面的框和中间框之间的间隙中显示背景图像，在中间框和最里面的框之间隐藏或剪切背景图像。

div {
  height: 200px;
  width: 100%;
  background: url(http://lorempixel.com/800/200/abstract/6);
}
#css-pattern {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0px 0px, 20px 20px, 20px calc(100% - 20px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20px) 20px, 20px 20px, 40px 40px, 40px calc(100% - 40px), calc(100% - 40px) calc(100% - 40px), calc(100% - 40px) 40px, 40px 40px);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0px 0px, 20px 20px, 20px calc(100% - 20px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20px) 20px, 20px 20px, 40px 40px, 40px calc(100% - 40px), calc(100% - 40px) calc(100% - 40px), calc(100% - 40px) 40px, 40px 40px);
}

/* just for demo */

body {
  background: radial-gradient(circle at center, aliceblue, mediumslateblue);
  min-height: 100vh;
}
<h3>Pure CSS Clip-path with fixed width gap on all 4 sides</h3>
<div id='css-pattern'></div>

使用SVG剪辑路径：

SVG clip-path提供比CSS版本更好的浏览器支持，因为它也支持Firefox。我们需要做的就是在下面的代码片段中创建一个path，然后用它来剪切容器。

svg path {
  fill: transparent;
  stroke: black;
}

/* Just for fun */

path {
  animation: draw 5s linear;
  stroke-dasharray: 4450;
}
@keyframes draw {
  from {
    stroke-dashoffset: -4450;
  }
  to {
    stroke-dashoffset: 0;
  }
}
<svg width='600px' height='200px'>
  <path d='M0,0 600,0 600,200 0,200 0,0 20,20 20,180 580,180 580,20 20,20 40,40 40,160 560,160 560,40 40,40 z' />
</svg>

如果容器的尺寸是静态的，SVG实现会容易得多。由于它们不是静态的，因此不能使用分数值，因为该值将根据元素的实际宽度而不同（无论100%对应）。例如，对于200px宽的元素，分数值0.2意味着40px，对于400px宽的元素意味着80px。您可以在代码段的第一个示例中看到它如何影响输出。

克服这种情况的一种方法是使用JavaScript（或您喜欢的任何其他脚本库），获取元素的实际计算宽度（以像素为单位）并计算路径d的坐标值基于它的属性。下面代码段中的第二个示例使用此方法。

注意： IE不支持剪辑路径，但由于您正在创建iOS应用，我认为这不应成为您的主要关注点。

window.onload = function() {
  setPathCoords();
};
window.onresize = function() {
  setPathCoords();
};

function setPathCoords() {
  var output = [],
    borderWidth = '20';
  var el = document.getElementById('percentage-pattern'),
    path = document.querySelector('#clipper2 > path'),
    origPath = 'M0,0 1,0 1,1 0,1 0,0 ';
  height = el.clientHeight;
  width = el.clientWidth;

  for (var x = 1; x < 3; x++) {
    point1 = (borderWidth * x) / width + "," + (borderWidth * x) / height;
    point2 = (borderWidth * x) / width + "," + (height - (borderWidth * x)) / height;
    point3 = (width - (borderWidth * x)) / width + "," + (height - (borderWidth * x)) / height;
    point4 = (width - (borderWidth * x)) / width + "," + (borderWidth * x) / height;

    output.push(point1);
    output.push(point2);
    output.push(point3);
    output.push(point4);
    output.push(point1);
  }
  document.querySelector('#clipper2 > path').setAttribute('d', origPath + output.join(' ') + 'z');
}
div {
  height: 200px;
  width: 100%;
  background: url(http://lorempixel.com/800/200/abstract/6);
}
#percentage-pattern {
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
#js-pattern {
  -webkit-clip-path: url(#clipper2);
  clip-path: url(#clipper2);
}

/* just for demo */

body {
  background: radial-gradient(circle at center, aliceblue, mediumslateblue);
  min-height: 100vh;
}
<svg width='0' height='0'>
  <defs>
    <clipPath id='clipper' clipPathUnits='objectBoundingBox'>
      <path d='M0,0 1,0 1,1 0,1 0,0 0.1,0.1 0.1,0.9 0.9,0.9 0.9,0.1 0.1,0.1 0.2,0.2 0.2,0.8 0.8,0.8 0.8,0.2 0.2,0.2z' />
    </clipPath>
    <clipPath id='clipper2' clipPathUnits='objectBoundingBox'>
      <path d='M0,0 1,0 1,1 0,1 0,0 ' />
    </clipPath>
  </defs>
</svg>

<h3>Output with JS</h3>
<div id='js-pattern'></div>
<h3>Pure SVG Clip-path</h3>
<div id='percentage-pattern'></div>

相关问题
最新问题