Responsive Irregular Background Shape with CSS

Responsive irregular background shape with CSS

Here is an idea based on this previous answer:

.box {
  margin:20px auto;
  font-size:22px;
  min-width:200px;
  display:table;
  padding:10px 30px;
  box-sizing: border-box;
  text-align:center;
  color:#fff;
  position:relative;
  z-index:0;
}
.box::before,
.box::after,
.box span::before,
.box span::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0; 
  right:50%;
  bottom:50%;
  background:#16489F;
  border-radius:10px 0 0 0;
  transform:var(--s,scaleX(1)) skew(-35deg);
  transform-origin:right bottom;
}
.box::after {
  --s:scalex(-1);
}
.box span::before {
  --s:scaleY(-1);
}
.box span::after {
  --s:scale(-1);
}

<div class="box"><span></span> some text here</div>

<div class="box"><span></span> more and more <br> text here</div>

<div class="box"><span></span> even more <br> and more <br> text here</div>

<div class="box"><span></span> long long loooooonooooog text <br> and more <br> text here</div>

CSS: how to create responsive irregular shapes

#myForm{  max-width: 100%;  width: 800px;  height: 300px;  position: relative;  background-color: #A0A0A0;  color: #fff;  font-size: 2.4em;  font-weight: 700;      }               #myForm span{   display:inline-block;           vertical-align: middle;}                  
#myForm::before{  content: '';  position: absolute;  bottom: 0;  width: 0;  height: 0;  border-style: solid;  border-width: 0 0 120px 800px;  border-color: transparent transparent #fff transparent;}
#myForm::after{  content: '';  position: absolute;  right: 0;  width: 0;  height: 0;  border-style: solid;  border-width: 0 80px 300px 0;  border-color: transparent #fff transparent transparent;}

<div id="myForm"></div>

How do I make irregular shape in CSS

Use clip-path this website is a great tool to help you get the hang of it, in your case you would need something like this

.shape {
width : 250px;
height : 400px;
background-color : #1a1a1a;
clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
}

<div class="shape">
</div>

Can I make an irregular div shape using only CSS?

This will be impossible with a single div, because the div will always be rectangular. See the excellent answer here for a fuller explanation: How can I make a div with irregular shapes with css3 and html5?

Edit: This is actually possible with the clip-path CSS attribute, as helpfully pointed out by @ZachSaucier in the comments. Demo You learn something new every day!

Irregularly shaped container with background in CSS

You can also use multiple background-image, with either slices of your designed box (classic way) or gradients, or a mix of both eventually.

gradients idea example :

h3, ul,li {  margin:0;  padding:0;  display:block;}h3 {  text-indent:-20px;}div {  width:100px;  margin:1em 1em 3em;  padding:5px 10px 5px 60px;  background:    linear-gradient(to right,  transparent 23px,      gray 23px,  gray 29px, transparent 29px,transparent 34px, black 34px) 0 bottom no-repeat,    linear-gradient(to right, gray 1px,  gray 6px,transparent 6px,transparent 10px, black 10px) 0 0 no-repeat,    linear-gradient(to right, gray 1px, transparent 1px, transparent 5px, gray 5px, gray 6px,transparent 6px,transparent 11px, black 11px, black 12px, gray 12px) 0 0 no-repeat,    linear-gradient(60deg, transparent 20px, gray 20px, gray 21px, transparent 21px, transparent 25px, gray 25px, gray 26px,transparent 26px, transparent 30px, black 30px, black 31px, gray 31px) 0 20px no-repeat,    linear-gradient(to right,  transparent 23px,      gray 23px, gray 24px, transparent 24px, transparent 28px,gray 28px, gray 29px, transparent 29px,transparent 34px, black 34px, black 34px, gray 35px) 0 61px no-repeat;   background-size:100% 1px,100% 1px, 100% 20px ,100%  41px, 100% 100%;  border-right:1px solid;  position:relative;  float:left;}
div:after {  content:'';  position:absolute;  top:100%;  right:0;  left:22px;  margin-top:5px;  height:16px;  border-top:solid 1px;  background:    linear-gradient(to right,black 1px, gray 1px) 0 0 no-repeat,    linear-gradient(-60deg,transparent 3px, black 3px, black 5px, gray 5px) top right no-repeat,    linear-gradient(-60deg,transparent 24px, black 24px, black 25px, gray 25px) right 5px no-repeat,    linear-gradient(60deg,transparent 3px, black 3px, black 4px, gray 4px) left 9px no-repeat,    linear-gradient(-60deg,transparent 3px, black 3px, black 4px, gray 4px) 5px 9px no-repeat,    linear-gradient(black,black) 0 5px no-repeat,    linear-gradient(black,black) 0 9px no-repeat,    linear-gradient(black,black) 3% 15px no-repeat;    ;  background-size:80% 9px, 40% 5px, 40% 4px, 20% 6px, 30% 6px, 97% 1px, 81% 1px, 29% 1px  }
body {  background:yellow;

<div>  <h3>Some options</h3>  <ul>  <li><input type="radio"> Option 1</li>  <li><input type="radio"> Option 2</li>  <li><input type="radio"> Option 3</li>  <li><input type="radio"> Option 4</li>  <li><input type="radio"> Option 5</li>  <li><input type="radio"> Option 6</li></ul></div><div>  <h3>Some options</h3>  <ul>  <li><input type="radio"> Option 1</li>  <li><input type="radio"> Option 2</li>  <li><input type="radio"> Option 3</li></ul></div><div>  <h3>Some options</h3>  <ul>  <li><input type="radio"> Option 1</li>  <li><input type="radio"> Option 2</li>  <li><input type="radio"> Option 3</li>  <li><input type="radio"> Option 4</li>  <li><input type="radio"> Option 5</li>  <li><input type="radio"> Option 6</li>  <li><input type="radio"> Option 7</li>  <li><input type="radio"> Option 8</li></ul></div>

Contain Text Within Irregular Shape

You can use css perspective here. Just apply it to the parent, then apply the reverse effect to the child. This way older browsers will simply display a square background, + responsive won't be an issue!

.container {  font-family: Monospace;  border: 3px solid black;  text-align: center;  padding: 0 20px;  transform: perspective(10px) rotateX(-0.3deg);  border-radius: 8px;  max-width: 600px;}
.container div {  transform: perspective(10px) rotateX(0.3deg);}
h2 {  display: inline-block;  padding: 0 10px;  background-color: #fff;  margin: -10px 0 0;}

<div class="container">  <div>    <h2>What's the difference? Craft vs plant</h2>    <p>I am trying to achieve the following in the most responsive, backward compatible way as possible. I appreciate that I may need to make a big compromise somewhere.</p>  </div></div>

---

Related Topics