如何从图像的顶部和底部剪切一个矩形？

Question

我正在尝试从图像中剪切一个矩形。 请告诉我这样做的最佳方法。 我需要支持 IE 11。（没有剪辑路径）。

我已经尝试这样做了，但对结果并不满意。

 body { margin: 0; } .block { height: 400px; display: flex; } .block-image, .block:before, .block:after { content: ""; position: relative; height: 100%; background-image: url("https://images.unsplash.com/photo-1558980664-10e7170b5df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"); background-size: 100vw auto; background-repeat: no-repeat; } .block:before { top: 50px; flex: auto; background-position: left top -50px; } .block:after { flex: auto; background-position: right top; } .block-image { flex: 1 1 300px; max-width: 300px; background-position: center top; }

 <div class="block"> <div class="block-image"></div> </div>

Answer 1

我会优化如下代码：

 body { margin: 0; background:pink; } .block { margin:50px 0; height: 400px; background:url("https://images.unsplash.com/photo-1558980664-10e7170b5df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80") no-repeat; background-size:0 0; } .block:before, .block:after { content: ""; float:left; height: 100%; background: inherit; } .block:before { width:30%; background-size:333.33% auto; /* 100%/0.3 */ background-position:left 0 top 0; transform:translateY(-50px); } .block:after { width:70%; background-size:142.85% auto; /* 100%/0.7 */ background-position:right 0 top -50px; }

 <div class="block"> </div>

使图像居中：

 body { margin: 0; background:pink; } .block { margin:50px 0; height: 400px; background:url("https://images.unsplash.com/photo-1558980664-10e7170b5df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80") no-repeat; background-size:0 0; } .block:before, .block:after { content: ""; float:left; height: 100%; background: inherit; } .block:before { width:30%; background-size:333.33% auto; /* 100%/0.3 */ background-position:left center; transform:translateY(-50px); } .block:after { width:70%; background-size:142.85% auto; /* 100%/0.7 */ background-position:right 0 top calc(50% - 50px); }

 <div class="block"> </div>

如果您想要更大的图像宽度：

 body { margin: 0; background:pink; } .block { margin:50px 0; height: 400px; background:url("https://images.unsplash.com/photo-1558980664-10e7170b5df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80") no-repeat; background-size:0 0; } .block:before, .block:after { content: ""; float:left; height: 100%; background: inherit; } .block:before { width:30%; background-size:500% auto; /* 150%/0.3 */ background-position:left 25% top 50%; transform:translateY(-50px); } .block:after { width:70%; background-size:214.275% auto; /* 150%/0.7 */ background-position:right 25% top calc(50% - 50px); }

 <div class="block"> </div>

---

这是使用 CSS 变量和calc()的更通用的解决方案。 我知道您想支持 IE，但这仅用于演示目的，您可以轻松使用计算值，如上面的示例：

 body { margin: 0; background:pink; } .block { --w:0.3; /* width of left part (without unit and from 0 to 1 (1 = 100%) )*/ --h:50px; /* height of the cut*/ --s:1.5; /* scale factor of the image (1 = 100% width of container)*/ margin:calc(var(--h) + 10px) 0; height: 400px; background:url("https://images.unsplash.com/photo-1558980664-10e7170b5df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80") 0/0 no-repeat; } .block:before, .block:after { content: ""; float:left; height: 100%; background: inherit; } .block:before { width:calc(var(--w)*100%); background-size:calc(var(--s) * (100%/var(--w))) auto; background-position: left calc( 100% * ( (var(--s) - 1) / (2* (var(--s) - var(--w)) ) ) ) top 50%; transform:translateY(calc(-1*var(--h))); } .block:after { width:calc(100%*(1 - var(--w))); background-size:calc(var(--s) * (100%/(1 - var(--w)))) auto; background-position: right calc( 100% * ( (var(--s) - 1) / (2* (var(--s) - 1 + var(--w)) ) ) ) top calc(50% - var(--h)); }

 <div class="block"> </div> <div class="block" style="--s:2;--h:100px;--w:0.5"> </div> <div class="block" style="--s:1.75;--h:150px;--w:0.8"> </div> <div class="block" style="--s:3;--h:30px;--w:0.7"> </div>

位置的计算有点复杂，你可以参考以下问题来了解它是如何工作的：在线性梯度上使用带有背景位置的百分比值

---

为了保持这个答案的通用性，我还将考虑clip-path方式，即使 IE 不支持它也是最合乎逻辑的方式

 body { margin: 0; background:pink; } .block { --w:30%; /* width of left part */ --h:50px; /* height of the cut*/ margin:10px 0; height: 400px; background:url("https://images.unsplash.com/photo-1558980664-10e7170b5df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80") center/cover no-repeat; clip-path:polygon( 0 0,var(--w) 0,var(--w) var(--h),100% var(--h), 100% 100%,var(--w) 100%,var(--w) calc(100% - var(--h)),0 calc(100% - var(--h))); }

 <div class="block"> </div> <div class="block" style="--h:100px;--w:50%"> </div> <div class="block" style="--h:150px;--w:80%"> </div> <div class="block" style="--h:30px;--w:70%"> </div>