Transparent arrow / indented triangle

Question

I would like to make a transparent arrow above the image . This triangle should be indented in a translucent block and display a background image.

Required Conclusion:

.barShow { background-color: #000; 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; } 

 <div class="barShow"></div> 

CSS transparent arrow should be transparent without color.

Answer 1

There are several ways to make a transparent arrow over an image using CSS. The two that I will describe include pseudo elements to minimize markup and have the same result. You can also see the SVG approach at the end of this answer:

The transparent effect on the black part around the arrow is made with rgba() colors that provide transparency. But you can use opacity on pseudo-elements if you want.

---

1. SkewX ()

You can use the CSS3 property skewX() on two pseudo-elements to make a transparent arrow. The main advantage of this approach is that the transparent arrow can be responsive , but also allows you to place the border on a black shape and around the track.

The sensitivity of the form is performed using the padding-bottom property to maintain its aspect ratio (this method is described here ).

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> 

Browser support for the transform : skew() property is IE9 + ( see canIuse ).

2. The border

The act of this method is browser support, so if you need IE8 support, this is for you. The disadvantage is that the shape cannot be responsive because the border cannot use% width.

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%; height: 20px; background-color: rgba(0, 0, 0, 0.8); } .arrow:before, .arrow:after { content: ''; position: absolute; bottom: 100%; width: 50%; box-sizing: border-box; } .arrow:before { right: 50%; border-bottom: 20px solid rgba(0, 0, 0, 0.8); border-right: 20px solid transparent; } .arrow:after { left: 50%; border-bottom: 20px solid rgba(0, 0, 0, 0.8); border-left: 20px solid transparent; } 

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

---

3. Play with him!

Example: if you can change the black transparent color in the same way as your background color (white here), you can make a transparent triangle / arrow with the same background image as the block:

Demo

 .wrap { position: relative; overflow: hidden; width: 50%; margin: 0 auto; background-color:#fff; } .wrap img { width: 100%; height: auto; display: block; } .wrap:before, .wrap:after { content:''; position: absolute; bottom: 0; width: 50%; background-color: inherit; padding-bottom:3%; } .wrap: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); } .wrap: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> 

4. Tooltip with a triangle above the image.

If you need to use this shape on top of another image , background gradient, or any other regular color, you will need to use a different approach to see the image around the shape as follows:

The goal is to use the same image twice. Once in the div element and once in the triangle and place them exactly in the same place with absolute positioning. The arrow is made using transform:rotate(); .

Demo

 body{ padding-top:100px; background:url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg')no-repeat center center; background-size:cover; } .wrap, .img { display:inline-block; position:relative; } .tr{ position:absolute; overflow:hidden; top:-25px; left:100px; width:50px; height:50px; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); } .tr img{ position:absolute; top:-15px; left:-100px; -webkit-transform-origin: 125px 40px; -ms-transform-origin: 125px 40px; transform-origin: 125px 40px; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); } .img{ overflow:hidden; width: 600px; height:100px; } .img img{ position:absolute; top:-40px; } 

 <div class="wrap"> <div class="img"> <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" /> </div> <div class="tr"> <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="" /> </div> </div> 

DEMO with box shadows.

5. SVG and cliPath

DEMO using the svg tag and clipPath.
It could be semantically better if you are making graphics.

Answer 2

Simple approach

• Use a pseudo-element with box-shadow and transform: rotate();

• Add overflow: hidden; into the main div.

Fragment:

 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

Here is a solution using a CSS clip path that does not overflow the shell.

 .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>