Responsive irregular background shape with CSS

问题

I have been trying to achieve the same result as shown in the image with plain CSS. I have tried using a background image (cover...), but it's not responsive (cuts the shape) I managed to get a similar result with clip-path but not the round corners, and also is not supported with all browsers.

.shape {
background:#16489F;
clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
}

What I'm aiming for:

enter image description here

Thank you very much

回答1:

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>

Like below if you want the radius on the edges:

.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:calc(50% - 5px);
  background:#16489F;
  border-radius:10px 0 0 11px;
  transform:var(--s,scaleX(1)) skew(-35deg);
  transform-origin:100% calc(100% - 5px);
}
.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>

回答2:

An element can have multiple background images so you could use images for the end caps and a matching color fill for the actual content area.

This demo is rough but it demonstrates the idea. I've left the fill an obviously different color to make it easier to see what's what. I'm using quick screenshots of your sample image and I caught a bit of the edge, causing the lines extending from the caps. But you get the idea.

.demo {
  padding: 24px 72px;
  color: white;
  background-color: skyblue;
  background-image:
    url(https://i.imgur.com/LocAlN0.png),
    url(https://i.imgur.com/zXDA91q.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 center, center right;
}

<div class="demo">
   Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots.
 </div>

回答3:

I would use 3 divs, first and last with background-images (the irregular shape) and the one in the middle with background-color instead.

来源：https://stackoverflow.com/questions/63143842/responsive-irregular-background-shape-with-css

标签

css

clip-path