对角线背景html和css

嘿，我想知道你们是否可以帮我解决一些我感兴趣的代码。在不同的网站上，比如udacity或者我的朋友正在制作的网站（他不会告诉我代码）他们有对角线背景。或者，也许你可以称之为对角线形状，或者任何它只是想知道如何创建它。一个例子就是udacity的主页。他们有后台分离，我想知道如何做到这一点（我不是梯度担心）https://www.udacity.com/对角线背景html和css

来源

2017-04-11 Alec Klem

你有一些“朋友”。您是否尝试过使用浏览器的开发工具来检查Udacity页面？寻找一个'变换'指定一个'skew' ... – nnnnnn

你做了什么研究？我刚刚搜索了'对角背景html'并收到了一些有趣的结果。另外，你做了什么尝试（如果有的话）？请阅读http://stackoverflow.com/help/how-to-ask了解更多信息。 – toonice

[**这里是CSS **]（https://pastebin.com/v0xpNw6K），如果您使用浏览器的开发工具来检查页面，您会发现它。 – hungerstar

这应该工作，

.wrap { 
 
    postion: relative; 
 
    background-color: #fff; 
 
    width: 100%; 
 
} 
 

 
.bg:before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 400px; 
 
    background-color: #000; 
 
    transform-origin: left bottom; 
 
    top: 0; 
 
    left: 0; 
    -webkit-transform: skew(0deg, -30deg); 
    -moz-transform: skew(0deg, -30deg); 
    -ms-transform: skew(0deg, -30deg); 
    -o-transform: skew(0deg, -30deg); 
 
    transform: skew(0deg, -30deg); 
 
}

<div class="wrap"> 
 
    <div class="bg"></div> 
 
</div>

来源

2017-04-11 03:45:26

.hero--homepage::before { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 300px; 
 
    z-index: -1000; 
 
    background: linear-gradient(160deg, #02CCBA 0%, #AA7ECD 100%); 
 
    transform-origin: left bottom; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    -webkit-transform: skew(0deg, -15deg); 
 
    -moz-transform: skew(0deg, -15deg); 
 
    -ms-transform: skew(0deg, -15deg); 
 
    -o-transform: skew(0deg, -15deg); 
 
    transform: skew(0deg, -15deg); 
 
}

<div class = "hero--homepage"></div>

来源

2017-04-11 04:02:02 xyz

对角线背景html和css

回答

相关问题