带有CSS的响应式不规则背景形状 [英] Responsive irregular background shape with CSS

问题描述

我一直在尝试使用纯CSS实现与图像中所示相同的结果.我尝试使用背景图片(封面...)，但没有响应(剪切形状)我设法通过剪切路径获得了相似的结果，但是没有圆角，而且并非所有浏览器都支持.

  .shape {背景:#16489F;剪切路径:多边形(5％0，95％0，100％50％，95％100％，5％100％，0％50％);}  

我的目标是

非常感谢您

解决方案

以下是基于

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:

Thank you very much

解决方案

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>

这篇关于带有CSS的响应式不规则背景形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！