How can I create Triangle shape clip mask using CSS

Question

I want to create triangle as shown in image. Does someone know how to achieve the effect?

Answer 1

Imagine the area with photo is split down the middle into two squares, with the photo as a background.

Now imagine you give those squares very thick top and bottom borders with colours corresponding to the areas above and below the photo.

Now imagine you also give them a very thick border for each of their adjacent sides (the left square has a right border, the right square has a left border), but this time, you make the border transparent.

You will see that where the top/bottom borders and the side borders meet, there is a diagonal edge between them where the colour changes to transparent. This leaves a transparent triangle in the adjacent corners where the background shows through.

Answer 2

Here is a fiddle that should solve your problem. I used :before and :after on a container to place two squares over the container with borders to create the arrows. You can mess with the border colors and widths to get the arrows how you want them (just remember the inside borders have to be the same weight to make an symmetrical triangle).

http://jsfiddle.net/Smzmn/

.hero {
    background: url(http://d.pr/i/eqn9+);
    height: 200px;
    position: relative;
}

.hero:before, .hero:after {
    box-sizing: border-box;
    content: " ";
    position: absolute;
    top:0;
    display: block;
    width: 50%;
    height: 100%;
    border: 30px solid orange;
    border-bottom-color: pink;
}

.hero:before {
    left: 0;
    border-right: 20px solid transparent;
    border-left: 0;
}

.hero:after {
    right: 0;
    border-left: 20px solid transparent;
    border-right: 0;
}

Answer 3

Triangle shape clip mask using CSS to clip image so that background appear.

You can achieve this kind of masking using clip property of CSS With SVG.

HTML

 <svg width="0" height="0">
        <clipPath id="clipping1" clipPathUnits="objectBoundingBox">
            <polygon points="0 0, 0 1, 100 0,   .6 0, .5 .2, .4 0">
        </clipPath>
    </svg>
    <img class="clip-animation" alt="" src="http://c1.staticflickr.com/9/8449/7966887330_ddc8018682_h.jpg">

CSS

.clip-animation {clip-path: url(#clipping1);-webkit-clip-path: url(#clipping1);  margin:100px; width:500px;} 
    body{ background-color:#CCCCCC;}

I have mask with an image tag you can also use this with div element or any other tag.

Check a working demo here. http://jsfiddle.net/VijayDhanvai/495rpzdb/

Answer 4

With newer browsers, you can use the clip-path CSS property. This is much less hacky, but you'll need a fallback for IE/Edge and older browsers.

Example

<div class="triangle"></div>

<style>
.triangle {
  width: 400px;
  height: 400px;
  background-color: blue;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
</style>