How to create a polygon div shape

Question

I would like to create an HTML element, for example in an image:

The problem is that the DIV element has the shape of a polygon instead of a regular rectangle, it will be placed above other elements as something like a pop-up window, and inside this element you need to show an image with a rectangular shape in the source, but it is shown on the Internet how filling all the spaces contains a triangle From the left side.

Do you think it is possible to realize that without preparing images in the form of transparent PNG in the correct polygon? Only CSS3 converts or uses canvas or SVG?

Answer 1

One way is to split the image into two containers, which are 50% larger than the size of the parent, convert each of them separately and put backgrounds so that they look like one single image. The transformation can be either skew (used in the answer) or rotation based on perspective.

Please note that since we are transforming the container, we must apply the opposite effect to the actual image so that it looks normal.

.image { position: relative; height: 150px; width: 450px; overflow: hidden; } .top-container, .bottom-container { position: absolute; left: 0px; height: 50%; width: 100%; overflow: hidden; backface-visibility: hidden; } .top-container { top: 0px; transform-origin: right bottom; transform: skew(-20deg); } .bottom-container { bottom: 0px; transform-origin: right top; transform: skew(20deg); background-position: 0% 100%; } .top-container:after, .bottom-container:after { position: absolute; content: ''; height: 100%; width: 100%; left: -14px; /* tan(20) * (height/2) / 2 */ background: url(http://lorempixel.com/450/150); background-size: 100% 200%; } .top-container:after { top: 0px; transform: skew(20deg); } .bottom-container:after { bottom: 0px; transform: skew(-20deg); background-position: 0% 100%; } /* Just for demo */ body { background: linear-gradient(90deg, crimson, indianred, purple); } .image2 { margin-top: 10px; height: 150px; width: 450px; background: url(http://lorempixel.com/450/150); } 

 <div class="image"> <div class='top-container'></div> <div class='bottom-container'></div> </div> <!-- this is the actual image for comparison --> <h3>Original Image</h3> <div class='image2'></div> 

---

I was going to suggest using SVG and clipPath , but since Persijn already posted this sample, I added another version with polygon below.

 .vector { position: relative; height: 150px; width: 450px; } svg { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } polygon { fill: url(#image); } /* Just for demo */ body { background: linear-gradient(90deg, crimson, indianred, purple); } 

 <div class='vector'> <svg viewBox='0 0 450 150' preserveAspectRatio='none'> <defs> <pattern id='image' height='150' width='450' patternUnits='userSpaceOnUse'> <image xlink:href='http://lorempixel.com/450/150' height='150' width='450' /> </pattern> </defs> <polygon points='15,0 450,0 450,150 15,150 0,75' /> </svg> </div> 

Answer 2

Svg

Script example

Solution found by Jbutler438

With clip-path and an image tag in svg, you can easily cut the shape of the arrow in front.

 <?xml version="1.0" ?> <svg width="300px" height="300px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="myClip"> <path d="M30 0, 100 0, 100 100, 30 100 0,50Z" /> </clipPath> </defs> <image xlink:href="http://lorempixel.com/300/300" x="0" y="0" width="100%" height="100%" clip-path="url(#myClip)" /> </svg>