透明的箭头/三angular形

我想在图像上做一个透明的箭头 。 这个三angular形应该在一个块中缩进并显示背景图像。

期望的输出：

CSS：

.barShow { background-color: #000; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .barShow:before { top: 0%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-top-color: #999; border-width: 20px; margin-left: -20px; } 

透明的CSS箭头应该是透明的，没有颜色。

Answer 1

有几种方法可以使用CSS在图像上制作透明箭头 。 我将描述的两个涉及伪元素，以最大限度地减less标记，并具有相同的输出。 在这个答案的末尾你还可以看到一个SVG方法：

箭头周围的黑色部分的透明效果是使用允许透明度的rgba()颜色制作的。 但是，如果您愿意，可以在伪元素上使用不透明度。

---

1. SkewX（）

您可以使用两个伪元素上的CSS3 skewX()属性来制作透明箭头。 这种方法的主要优点是透明的箭头可以响应，但它也可以让你在黑色的形状和traingle周围的边界。

该形状的响应性是由padding-bottom属性来保持其纵横比（这种技术在这里描述）。

DEMO

 .wrap { position: relative; overflow: hidden; width: 70%; margin: 0 auto; } .wrap img { width: 100%; height: auto; display: block; } .arrow { position: absolute; bottom: 0; width: 100%; padding-bottom: 3%; background-color: rgba(0, 0, 0, 0.8); } .arrow:before, .arrow:after { content: ''; position: absolute; bottom: 100%; width: 50%; padding-bottom: inherit; background-color: inherit; } .arrow:before { right: 50%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -ms-transform: skewX(45deg); -webkit-transform: skewX(45deg); transform: skewX(45deg); } .arrow:after { left: 50%; -ms-transform-origin: 0 100%; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -ms-transform: skewX(-45deg); -webkit-transform: skewX(-45deg); transform: skewX(-45deg); } 

 <div class="wrap"> <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" /> <div class="arrow"></div> </div> 

Answer 2

简单的方法

• 使用带有box-shadow和transform: rotate();伪元素transform: rotate();

• 添加overflow: hidden; 主要分区。

摘录：

 body { margin: 0; padding: 0; background: url(http://i.imgur.com/EinPKO3.jpg); background-size: cover; } div { height: 100px; width: 100%; position: absolute; bottom: 0; overflow: hidden; } div:before { position: absolute; top: -50px; left: calc(50% - 35px); content: ""; height: 50px; width: 50px; background: transparent; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); box-shadow: 0 0 0 5000px rgba(0, 0, 0, 0.6); } 

 <div></div> 

Answer 3

这是一个使用不会溢出包装的CSS 剪辑path的解决scheme。

 .wrap { position:relative; width:480px; height:270px; background-image:url(http://placehold.it/480x270); } .wrap:after { content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:50px; background-color:rgba(0, 0, 0, 0.7); -webkit-clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%); -moz-clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%); clip-path:polygon(0 0, calc(50% - 30px) 0, 50% 50%, calc(50% + 30px) 0, 100% 0, 100% 100%, 0 100%); } 

 <div class="wrap"></div>