2<节>之间的透明箭头。 [英] Transparent arrow in between 2 <sections>

问题描述

如何制作两个部分之间的透明箭头？两个部分都有其背景图像，并且 background-size：cover 。

我一直在研究各种方法，但大多数我发现通常是在单个图片上制作透明箭头，或使用 CSS三角形，我认为这两种情况都不适用于这种情况。

我到目前为止所做的一个片段。即使它不是一个纯CSS解决方案，但我不能找到一个可靠的方法做一个可变宽度。

解决方案

p> CSS中有 clip-path 属性。支持不是很好，但它的工作。

  section {width：300px; height：200px;}。first {background：red; -webkit-clip-path：多边形（0％0％，100％0％，100％85％，60％85％，50％100％，40％85％，085％ clip-path：多边形（0％0％，100％0％，100％85％，60％85％，50％100％，40％85％，0 85％ margin-top：-30px;}  

 < section class =first>< / section>< section class =second>< / section>  
 
 
 
另一个令人担忧的是使用SVG元素来剪裁背景图片。另请查看另一个问题：透明箭头/三角形 
 
How do I make a transparent arrow that is between 2 sections? Both sections have its background-image and with background-size: cover.

An example:



I have been researching for various methods but most I found are usually making of a transparent arrow across a single image, or making of CSS triangle, both of which I believe do not work for this case.

A snippet on what I have so far. I would be okay even if it's not a pure CSS solution but I cannot find a way to do it reliably with a variable width.
解决方案
There is clip-path property in CSS. Support is not wery good, but it works. 



section {
  width: 300px;
  height: 200px;
}

.first {
  background: red;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 60% 85%, 50% 100%, 40% 85%, 0 85%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 60% 85%, 50% 100%, 40% 85%, 0 85%);
}

.second {
  background: green;
  margin-top: -30px;
}

<section class="first"></section>
<section class="second"></section>





Another woy would be to use SVG element for cliping background image. Also look into another question: Transparent arrow/triangle

                        
这篇关于2&lt;节&gt;之间的透明箭头。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！