How to Create a Polygon Shape Div

How to make a polygon div in CSS

you can do it with :after pseudo classes. If you uncomment the :before in this example you get a hexagon

#hexagon{  position: relative;  height:100px;  width:50%;  color: white;  background: green;  padding-bottom: 15%;  overflow:hidden;  background-clip: content-box;}#hexagon:after {  content: "";  position: absolute;  top:100px;  left: 0;  background-color:green;  padding-bottom: 50%;  width: 57.7%;  transform-origin: 0 0;  transform: rotate(-30deg) skewX(30deg);}

<div id="hexagon"></div>

Creating a specific div shape (like a polygon with a tail)

Since there are two different gradient backgrounds with two different angles involved, doing this with a single element would become very complex. It can be done with one single element but would require setting multiple gradient backgrounds to the element, positioning them and adjusting the clip-path.

Instead of going to so much complexities, it would be a better idea to use a couple of elements where one is for the polygon on the top and the other is for the tail like part at the bottom.

Following is a full description of what was done to achieve the shape:

Add two pseudo-elements to the main container div. The :before pseudo-element would form the polygon on top and the :after would form the tail at the bottom.
Two pseudo elements are required because if we clip the parent element itself into polygon shape then the tail part would also become invisible due to clipping of the parent.
Position the :after pseudo-element such that its bottom and left match with the coordinates of lowest point on the polygon.
Add background in the form of linear-gradient to both the polygon pseudo-element and the tail like pseudo-element.
The :after pseudo-element is rotated by -20 degrees to give it an angled appearance. This can also be done without using transform (by just modifying the coordinates of the clip-path ) but I feel that using transform makes them a bit more intuitive.

Note: Browser support for clip-path is very low at present and you'd probably want to have a look at using SVG because the clip paths won't work in Firefox without using inline SVG and in IE they won't work at all.

div {  position: relative;  width: 250px;  height: 250px;}div:before {  position: absolute;  content: '';  height: 100%;  width: 100%;  background: linear-gradient(to bottom left, rgb(251, 228, 168), rgb(246, 197, 51));  -webkit-clip-path: polygon(35% 0%, 91% 12%, 100% 35%, 91% 67%, 33% 78%, 0% 50%, 6% 23%);  clip-path: polygon(35% 0%, 91% 12%, 100% 35%, 91% 67%, 33% 78%, 0% 50%, 6% 23%);}div:after {  position: absolute;  content: '';  height: 15%;  width: 22%;  left: 33%;  bottom: 7%;  background: linear-gradient(to bottom left, rgb(250, 225, 150), rgb(248, 210, 91) 45%, rgb(240, 168, 43) 50%, rgb(242, 181, 44) 55%, rgb(245, 192, 44));  transform-origin: left top;  transform: rotate(-20deg);  -webkit-clip-path: polygon(0% 0%, 90% 35%, 100% 100%, 0% 100%, 35% 40%);  clip-path: polygon(0% 0%, 90% 35%, 100% 100%, 0% 100%, 35% 40%);  }

<div></div>

How to create a polygon shape div

One method could be to split the image into two containers which are 50% the size of the parent, transform each of them separately and position the backgrounds to look like they are one single image. The transform could either be a skew (used in the answer) or a perspective based rotation.

Note that since we are transforming the container, we have to apply the reverse effect to the actual image for it to look 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>

Trying to make a polygon responsive in DIV

I assume you're looking for this:

.triangle {
  width: 40%;
}

.triangle svg {
  width: 100%;
  height: auto;
}

Updated fiddle: https://jsfiddle.net/L8gv17c2/3/

Simply change the width of the parent to adjust the width of the <svg> (responsively): https://jsfiddle.net/L8gv17c2/4/

Create a polygon shape using CSS or SVG that works in IE

you may try :after element and apply skew transformation like this :

.holder {  background-image: url(https://unsplash.it/1002/1000/?random);  background-cover: cover;  width: 500px;  height: 300px;  background-position: 50%;  margin-left: 30px;  position: relative;}
.shape {  position: absolute;  left: -20px;  bottom: -20px;  width: 200px;  padding: 20px 40px 20px 20px;  background: #1e5799; /* Old browsers */  background: linear-gradient(to bottom, #1e5799 0%,#1e5799 46%,#7db9e8 100%);}.shape:after {    content: " ";    position: absolute;    top: 0;    bottom: 0;    right: -20px;    width: 35px;    background: #000;    transform: skew(10deg);    background: linear-gradient(to bottom, #1e5799 0%,#1e5799 46%,#7db9e8 100%);}

<div class="holder">  <div class="shape">    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.  </div></div>

How to make shape with html div and css

clip-path:polygon() can easily do it:

html {
  height:100%;
  background:url(https://picsum.photos/id/104/800/800) center/cover;
}

html::before,
html::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
}
html::before {
  left:0;
  background:url(https://picsum.photos/id/1016/800/800) center/cover;
  clip-path:polygon(0 0,100% 0,100% 50%,0 80%);
}
html::after {
  right:0;
  background:url(https://picsum.photos/id/1019/800/800) center/cover;
  clip-path:polygon(0 0,100% 0,100% 80%,0 50%);
}

Custom Polygon Shape

I think it is same as your picture

body{  background:black;}.outer{  margin:40px auto;  width:1200px;  height:100px;  background:#37FFF7;}
.inner {  margin: 0 auto; border-bottom: 30px solid white; border-left: 70px solid transparent; border-right: 70px solid transparent; height: 0; width: 700px;  position: relative;  top:70px;}

<div class="outer">  <div class="inner"></div></div>

How to create an irregular shape for images using css?

To create any shape there is a css clip path generator.

Example web-site:

cssportal.com.
bennettfeely.com
uplabs.com

Example code:

img { 
 -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}

<img src="https://thumbs.dreamstime.com/b/d-wallpaper-textere-white-chamomiles-abstract-canvas-textures-d-wallpaper-textere-white-chamomiles-abstract-canvas-textures-160056709.jpg" alt="Sample Image">