position: absolute
очевидно, а уголки у него снизу псевдоэлементами и transform: skew(Ndeg)
const el = document.querySelector('.someClassName');
window.scrollTo(0, el.scrollHeight);
window.scrollTo(0, document.querySelector('.someClassName').scrollHeight);
-ms-text-overflow
.ch {
background: red;
position: relative;
padding-top: 48%;/* или через calc - 157 / 321 * 100 */
top: 50%;
transform: translatey(-50%);
}
[
{
"key": "ctrl+shift+g",
"command":"editor.emmet.action.wrapWithAbbreviation",
"when": "editorTextFocus && !editorReadonly"
}
]
ext install htmltagwrap
.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;
}
.cv-image {
position: relative
}
.img1,
.img2 {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
const el = document.getElementById('image');
const divOffset = offset(el);
window.onscroll = stay;
function stay() {
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
el.style.top = divOffset.top + scrollTop + 'px'
}
function offset(el) {
var rect = el.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
h = document.getElementById('A').clientHeight ||
h = document.getElementById('A').offsetHeight ||
h = document.getElementById('A').scrollHeight ||
t = window.pageYOffset
.logo {
background: #000;
/* width: 42px; удалить*/
height: 42px;
display: inline-block;
margin-top: 14px;
}
transform: skewY(20deg)
вполне справляется с этой задачей + поддержка браузерами есть + адаптивность решается % величинами