CSS 倾斜背景(不是全宽/有点不同)
CSS Slanted Background (not full width / a bit different)
我已经完成了一个简单的网站设计,现在我想练习我的编码技能,让它活起来。不过我好像有点新手。
This is the background I want to accomplish and after a lot of research, this 是我能得到的最好的(令人失望)..
现在,问题.. 是否可以用普通 CSS 开发它? (可能很少有推荐?)
任何有用的答案将不胜感激!
谢谢!
编辑:这是代码。 (抱歉,忘记了)
HTML
<section id="hero">
<div class="bg"></div>
</section>
CSS
#hero .bg {
background: #8c57d1; /* Old browsers */
background: -moz-linear-gradient(-45deg, #8c57d1 0%, #1090cb 43%, #1046d1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #8c57d1 0%,#1090cb 43%,#1046d1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #8c57d1 0%,#1090cb 43%,#1046d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 90%;
position: absolute;
box-sizing: border-box;
border-bottom-right-radius: 200px;
padding: 55vh 0px;
}
#hero .bg:after {
content: "";
bottom: 0;
position: absolute;
left: 0;
height: 0;
width: 0;
border-color: transparent transparent #FFFFFF transparent;
border-style: solid;
border-width: 0 0 20vw 90vw;
}
这是我能得到的最接近该图像的图像。希望对您有所帮助。
#hero .bg {
background: #8c57d1; /* Old browsers */
background: -moz-linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(135deg, #8c57d1 20%,#1090cb 43%,#1046d1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #8c57d1 20%,#1090cb 43%,#1046d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 90%;
position: absolute;
left:-60px;
top:-10px;
box-sizing: border-box;
border-bottom-right-radius: 20px;
padding: 50vh 0px;
-ms-transform: skew(-10deg,0deg);
-webkit-transform: skew(-10deg,0deg);
transform: skew(-10deg,0deg);
}
#hero .bg:after {
content: "";
bottom: 0;
position: absolute;
left: 0;
height: 0;
width: 0;
border-color: transparent transparent #FFFFFF transparent;
border-style: solid;
border-width: 0 0 15vw 100vw;
}
<section id="hero">
<div class="bg"></div>
</section>
这是另一个:
#hero .bg {
background: #8c57d1;
/* Old browsers */
background: -moz-linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 95%;
position: absolute;
left: -60px;
top: -100px;
box-sizing: border-box;
border-bottom-right-radius: 20px;
padding: 50vh 0px;
-ms-transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
transform: skew(-10deg, -9deg);
}
<section id="hero">
<div class="bg"></div>
</section>
我已经完成了一个简单的网站设计,现在我想练习我的编码技能,让它活起来。不过我好像有点新手。
This is the background I want to accomplish and after a lot of research, this 是我能得到的最好的(令人失望)..
现在,问题.. 是否可以用普通 CSS 开发它? (可能很少有推荐?)
任何有用的答案将不胜感激!
谢谢!
编辑:这是代码。 (抱歉,忘记了)
HTML
<section id="hero">
<div class="bg"></div>
</section>
CSS
#hero .bg {
background: #8c57d1; /* Old browsers */
background: -moz-linear-gradient(-45deg, #8c57d1 0%, #1090cb 43%, #1046d1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #8c57d1 0%,#1090cb 43%,#1046d1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #8c57d1 0%,#1090cb 43%,#1046d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 90%;
position: absolute;
box-sizing: border-box;
border-bottom-right-radius: 200px;
padding: 55vh 0px;
}
#hero .bg:after {
content: "";
bottom: 0;
position: absolute;
left: 0;
height: 0;
width: 0;
border-color: transparent transparent #FFFFFF transparent;
border-style: solid;
border-width: 0 0 20vw 90vw;
}
这是我能得到的最接近该图像的图像。希望对您有所帮助。
#hero .bg {
background: #8c57d1; /* Old browsers */
background: -moz-linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(135deg, #8c57d1 20%,#1090cb 43%,#1046d1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #8c57d1 20%,#1090cb 43%,#1046d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 90%;
position: absolute;
left:-60px;
top:-10px;
box-sizing: border-box;
border-bottom-right-radius: 20px;
padding: 50vh 0px;
-ms-transform: skew(-10deg,0deg);
-webkit-transform: skew(-10deg,0deg);
transform: skew(-10deg,0deg);
}
#hero .bg:after {
content: "";
bottom: 0;
position: absolute;
left: 0;
height: 0;
width: 0;
border-color: transparent transparent #FFFFFF transparent;
border-style: solid;
border-width: 0 0 15vw 100vw;
}
<section id="hero">
<div class="bg"></div>
</section>
这是另一个:
#hero .bg {
background: #8c57d1;
/* Old browsers */
background: -moz-linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #8c57d1 20%, #1090cb 43%, #1046d1 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 95%;
position: absolute;
left: -60px;
top: -100px;
box-sizing: border-box;
border-bottom-right-radius: 20px;
padding: 50vh 0px;
-ms-transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
transform: skew(-10deg, -9deg);
}
<section id="hero">
<div class="bg"></div>
</section>