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?

enter image description here

possible duplicate of [How does this CSS triangle shape work?](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work) — Beterraba, Jun 20 '14 at 12:05
This is not using css but,You can edit image in photoshop/paint and add the triangle effect. make sure to match the color strip using color picker tool with that of header and footer. Add the image then making it perfectly fit between header and footer. — Mustafa sabir, Jun 20 '14 at 12:08
possible duplicate of [Transparent CSS arrow over an image](http://stackoverflow.com/questions/23758922/transparent-css-arrow-over-an-image) — web-tiki, Jun 20 '14 at 12:08

score 9 · Answer 1 · edited Jul 28 '22 at 08:01

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/56gur0x4/1/

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

score 5 · Answer 2 · answered Mar 08 '18 at 14:43

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>

score 2 · Answer 3 · answered Oct 20 '15 at 06:49

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/

score 1 · Answer 4 · answered Jun 20 '14 at 12:11

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.

How can I create Triangle shape clip mask using CSS

4 Answers4

Example

Linked

Related