如何使用HTML,CSS使Background div内部弯曲? [英] How to make Background div inner curved using HTML, CSS?
本文介绍了如何使用HTML,CSS使Background div内部弯曲?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望我的节背景看起来像最后的图像所示,我如何使用CSS做到这一点?
I want my section background look like as shown in the image at the end, how can i do that using css?
.bg{
width: 400px;
height: 200px;
padding: 20px;
text-align: center;
border: 1px solid #000;
background: red;
color: #fff;
display: flex;
}
.bg p{
text-align: center;
margin: auto;
font-size: 36px;
}
<div class="bg">
<p>Section Content</p>
</div>
推荐答案
您可以考虑使用 linear -gradient
,如下所示,无需其他元素:
You can consider multiple background using linear-gradient
like below without the need of extra elements:
.bg{
width: 400px;
height: 220px;
padding: 50px 0;
box-sizing:border-box;
text-align: center;
background:
linear-gradient(to bottom left , red 50%,transparent 51%) bottom left,
linear-gradient(to bottom left , transparent 49%,red 50%) top left,
linear-gradient(to bottom right, red 50%,transparent 51%) bottom right,
linear-gradient(to bottom right, transparent 49%,red 50%) top right,
red content-box;
background-size:50% 50px;
background-repeat:no-repeat;
color: #fff;
display: flex;
}
.bg p{
text-align: center;
margin: auto;
font-size: 36px;
}
<div class="bg">
<p>Section Content</p>
</div>
但是如果您需要边界,那么我会考虑这样的伪元素:
But in case you need border around I would then consider pseudo-elements like this:
.bg{
width: 400px;
height: 200px;
padding: 20px;
text-align: center;
position:relative;
color: #fff;
display: flex;
z-index:0;
}
.bg:before,
.bg:after{
content:"";
position:absolute;
top:0;
bottom:0;
background:red;
border:2px solid #000;
z-index:-1;
}
.bg:before {
right:50%;
left:0;
transform:skewY(15deg);
transform-origin:top left;
border-right:none;
}
.bg:after {
left:50%;
right:0;
transform:skewY(-15deg);
transform-origin:top right;
border-left:none;
}
.bg p{
text-align: center;
margin: auto;
font-size: 36px;
}
<div class="bg">
<p>Section Content</p>
</div>
这篇关于如何使用HTML,CSS使Background div内部弯曲?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文