CSS 响应式不规则背景形状
Responsive irregular background shape with CSS
我一直在尝试使用纯 CSS 获得与图像中所示相同的结果。
我试过使用背景图片(封面......),但它没有响应(切割形状)
我设法通过 clip-path 获得了类似的结果,但不是圆角,而且并非所有浏览器都支持。
.shape {
background:#16489F;
clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
}
我的目标是:
非常感谢
我会使用 3 个 div,第一个和最后一个带有背景图像(不规则形状),中间的一个带有背景颜色。
一个元素可以有多个背景图像,因此您可以使用图像作为端盖,并为实际内容区域使用匹配的颜色填充。
这个演示很粗糙,但它演示了这个想法。我已将填充物保留为明显不同的颜色,以便更容易看出是什么。我正在使用您的示例图像的快速屏幕截图,我抓住了一点边缘,导致线条从大写字母延伸。但是你明白了。
.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>
这是一个基于
的想法
.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>
如果你想要边缘上的半径,如下所示:
.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 获得与图像中所示相同的结果。 我试过使用背景图片(封面......),但它没有响应(切割形状) 我设法通过 clip-path 获得了类似的结果,但不是圆角,而且并非所有浏览器都支持。
.shape {
background:#16489F;
clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
}
我的目标是:
非常感谢
我会使用 3 个 div,第一个和最后一个带有背景图像(不规则形状),中间的一个带有背景颜色。
一个元素可以有多个背景图像,因此您可以使用图像作为端盖,并为实际内容区域使用匹配的颜色填充。
这个演示很粗糙,但它演示了这个想法。我已将填充物保留为明显不同的颜色,以便更容易看出是什么。我正在使用您的示例图像的快速屏幕截图,我抓住了一点边缘,导致线条从大写字母延伸。但是你明白了。
.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>
这是一个基于
.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>
如果你想要边缘上的半径,如下所示:
.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>