Как можно реализовать такой переход?
3 ответа
смотреть на полном экране
:root{
--width:calc(100vw - 16px);
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
header{
width:var(--width);
height:100vh;
background:url(https://images.pond5.com/defocused-abstract-background-night-city-footage-011498478_prevstill.jpeg);
background-size:100% 100%;
}
main{
width:var(--width);
background:#fff;
position: relative;
display:flex;
align-items:flex-start;
justify-content: space-around;
}
main:after{
content:"";
border-left:0px solid transparent;
border-right:var(--width) solid #fff;
border-top:15vh solid transparent;
border-bottom:10px solid transparent;
position: absolute;
top:-15vh; left:0; right:0;
}
.forma{
width:250px;
transform:translate(0,-200px);
text-align:center;
padding:20px;
background:#fff;
position: relative;
z-index:100;
border:1px solid #ccc;
}
.forma h2{
font-family:Helvetica;
font-weight:900;
font-size:1.3em;
}
input{
display:block;
padding:4px;
outline:none;
border:1px solid #ccc;
color:#ccc;
width:80%;
margin:10px auto;
}
.forma p{
font-size:12px;
text-align:left;
width:80%;
margin:15px auto;
}
.text{
width:300px;
padding:20px;
}
.text h2{
text-transform:uppercase;
padding:10px 4px;
}
.text p{
font-size:14px;
}
ul{
display:flex;
justify-content: flex-end;
list-style:none;
padding-right:20px;
}
ul li{
margin-right:20px;
}
ul a{
color:#fbfbfb;
font-size:1.2em;
text-decoration:none;
}
.header-wrapper{
display:flex;
justify-content: space-between;
align-items:center;
padding:20px 0;
}
header img{
width:180px;
height:30px;
margin-left:20px;
}
<header>
<div class="header-wrapper">
<img src="http://www.pngmart.com/files/4/Microsoft-Logo-Transparent-PNG.png" alt="">
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
<li><a href="">item4</a></li>
<li><a href="">item5</a></li>
</ul>
</div>
</header>
<main>
<div class="text">
<h2>welcome User</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In, accusamus sint doloribus voluptatem mollitia esse amet dignissimos quis voluptas a vitae, quia, minus voluptatibus nemo tempore quae repellat omnis laborum.</p>
</div>
<div class="forma">
<h2>Lorem ipsum dolor sit </h2>
<form action="">
<input type="text" placeholder="name">
<input type="text" placeholder="nickname">
<input type="email" placeholder="email">
<input type="password" placeholder="password">
<button>letter my now</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique exercitationem id impedit nobis sequi eaque recusandae?</p>
</form>
</div>
</main>
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 500px;
height: 500px;
border: 1px solid #000;
}
.box1 {
height: 250px;
padding: 10px;
background: #222;
color: #fff;
}
.box2 {
height: 250px;
background: tomato;
position: relative;
overflow: hidden;
}
.box2:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
border-style: solid;
border-width: 0 0 75px 500px;
border-color: transparent transparent tomato #222;
}
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
</div>
Адаптивное решение с помощью градиентов и тригонометрии
// Переводит радианы в углы
Math.degrees = function(radians) {
return radians * 180 / Math.PI;
};
function transitionEffect()
{
//Вынести размеры блока в переменную
var h = $(".transition").height(), w = $(".transition").width();
//Узнать гипотенузу
var hypotenuse = Math.sqrt(Math.pow(h,2) + Math.pow(w,2));
//Узнать угол
var angle = Math.acos((Math.pow(w,2) + Math.pow(hypotenuse,2) - Math.pow(h,2)) / (2*w*hypotenuse));
//Добавить градиент для блока .transition
$(".transition").css("background", `linear-gradient(-${Math.degrees(angle)}deg, #aaa 50%, #333 50.2%)`);
}
transitionEffect();
$(window).resize(function(){
transitionEffect();
});
body {
margin:0;
}
.transition {
width:100%;
height:100px;
}
.block-black {
width:100%;
height:100px;
background:#333;
}
.block {
width:100%;
height:100px;
background:#aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-black"></div>
<div class="transition"></div>
<div class="block"></div>