position: absolute
очевидно, а уголки у него снизу псевдоэлементами и transform: skew(Ndeg)
<path class="path-2" d="M0,400 L 1000,400 1000,445 S 500,420 0,480 Z" fill="#2b81bf"></path>
<path class="path-2" d="M0,400 L 1000,400 1000,500 S 500,500 0,500 Z" fill="#2b81bf"></path>
let i = 0;
(function loop() {
i++;
path.setAttribute('d', `M0,400 L 1000,400 1000,445 S ${i},420 0,480 Z`);
if (i === 500) return
window.requestAnimationFrame(loop);
})();
transform: rotate(-45deg);
transform: rotate(-15deg);
-ms-text-overflow
.ch {
background: red;
position: relative;
padding-top: 48%;/* или через calc - 157 / 321 * 100 */
top: 50%;
transform: translatey(-50%);
}
...
<body>
<div id="app">
...
</div>
</body>
...
<div id="page">
...
</div>
...
<div class="header"><div class="header__wrapper"></div></div>
. Но это все на Ваше усмотрение. .image{
width: 200px;
height: 200px;
border: 4px solid transparent;
border-radius: 50%;
background-image: linear-gradient(white, white), radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
background-origin: border-box;
background-clip: content-box, border-box;
}
li{
border: 2px solid #ddd;
}
li:after {
content: "";
display: table;
clear: both;
}
<li class="selected">
<a href="javascript:void(0)" class="wr-tooltip" data-value="s-37%d0%bb">S<br>37Л</a>
</li>
span{
display: inline-block
}
<div class="siema">
<div>Hi, I'm slide 1</div>
<div>Hi, I'm slide 2</div>
<div>Hi, I'm slide 3</div>
<div>Hi, I'm slide 4</div>
</div>
position: absolute
и прижата к верху top: 0
.<header>
<section class="slider">
<div class="slider__slide"> <!-- тут текст и картинка--> </div>
<div class="slider__slide"> <!-- тут текст и картинка--> </div>
<div class="slider__slide"> <!-- тут текст и картинка--> </div>
....
</section>
<nav> <!-- тут меню --> </nav>
</header>
header{
position: relative;
width: 100%;
height: 100vh;
}
.slider{
width: 100%;
height: 100%;
}
.slider__slide{
width: 100%;
height: 100%;
background: url() cover;
.....
}
nav{
position: absolute;
top: 0;
}