How to Make an Irregular <Div> Shape Using Only CSS

<svg height="150" width="150">
    <polygon points="20,10 100,30 120,100 0,100" style="fill:red;" />
</svg>

How can I make a div with irregular shapes with css3 and html5?

Elements have always been rectangular. Still, you can simulate other shapes by drawing CSS shapes within the rectangular division and by arranging different divisions (with z-index, etc.). This will help you:

http://css-tricks.com/examples/ShapesOfCSS/

How to create an irregular square shape in css?

You can use clip-path.

The clip-path CSS property creates a clipping region that defines
what part of an element should be displayed. More specifically, those
portions that are inside the region are shown, while those outside are
hidden.

Try this code snippet.

div{   width: 150px;   height: 150px;   -webkit-clip-path: polygon(5% 7%, 91% 14%, 98% 91%, 0% 100%);   clip-path: polygon(5% 7%, 91% 14%, 98% 91%, 0% 100%);   background: pink;}

<div></div>

css div containers with irregular shapes

Since all the answers use 2 elements, let's post another with a single element. Uses padding to keep the text inside the trapezoid, and 2 gradients to create the background in trapezoid shape

div {  width: 300px;  padding: 0px 50px;  background-image: linear-gradient(80deg, transparent 40px, lightblue 40px), linear-gradient(-80deg, transparent 40px, lightblue 40px);  background-size: 51% 100%;  background-position: left bottom, right bottom;  background-repeat: no-repeat;}

<div>"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 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</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:

1. cssportal.com.
2. bennettfeely.com
3. 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">

Create slanted / irregular shape div

As mentioned in my comment, I have created a skewed triangle (if you remove the padding CSS you will see), and then added padding so that you can't see the tip of the triangle

.cornered {
    width: 160px;
    height: 0px;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 280px solid blue;
    padding:60px;
}

Fiddle

CSS custom shape with irregular rectangle and border

Use clip-path on pseudo elements. The trick is to consider the same clip-path and apply a scale transformation to one pseudo element to simulate the border. Simply adjust the value of the polygon to get the needed result.

Hover to see a different clip-path:

.parallelogram {   padding:20px 45px;   font-size:30px;   color: white;   border:none;   background:none;   outline:none;   position:relative;   z-index:0;   margin:15px;   filter:drop-shadow(0px 30px 25px rgba(236, 0, 244, 0.45));}.parallelogram:before,.parallelogram:after {   content:"";   position:absolute;   z-index:-1;   top:0;   left:0;   right:0;   bottom:0;   clip-path: polygon(0 11%, 100% 0, 90% 88%, 3% 96%);   transition:1s all;   background:#000;}.parallelogram:before {  background:#EC00F4;  transform:scale(1.05,1.12);}
.parallelogram:hover:before,.parallelogram:hover:after {   clip-path: polygon(5% 2%, 100% 5%, 100% 100%, 0% 94%);}

<button class="parallelogram"> Hello button </button><button class="parallelogram"> button </button><button class="parallelogram"> A </button>

---

Related Topics