CSS倾斜的背景（不是全宽/有点不同）

  • Z时代
  • 2024-01-10
  • 分类：问答

我做了一个简单的网站设计，现在我想练习我的编码技能，使它活着。但看起来我有点新手。CSS倾斜的背景（不是全宽/有点不同）

This就是我要完成的背景和大量的研究后，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;  
}  
\t

<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>

以上是 CSS倾斜的背景（不是全宽/有点不同） 的全部内容， 来源链接： utcz.com/qa/257542.html

回到顶部