How to create a triangle shape clip template using CSS

Question

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

Answer 1

Here is a fiddle that should solve your problem. I used: before and: after on the container to place two squares above the container with borders to create arrows. You can spoil the colors and width of the border to get the arrows as you want them (just remember that the inner borders must be the same weight to create a 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 2

CSS , .

, CSS 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;}

, div .

. http://jsfiddle.net/VijayDhanvai/495rpzdb/

Answer 3

, .

, , .

, ( , ), .

You will see that where there are upper / lower borders and boundary borders, there is a diagonal edge between them, where the color changes to transparent. This leaves a transparent triangle at adjacent corners where the background passes.

Answer 4

With newer browsers, you can use the CSS property clip-path. This is much less hacked, but you will need a reserve 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>