<div class="slider">
<div class="button button-left"></div>
<div class="button button-right"></div>
</div>
.slider .button {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.slider .button-right {
right: -30px;
}
.slider .button-left {
left: -30px;
}
Если ли смысл в 4k
div {
position: relative;
display: inline-block;
padding: 20px;
background: white;
z-index: 1;
}
div:before, div:after {
content: "";
position: absolute;
display: block;
background: blue;
left: -10px;
top: -10px;
}
div:before {
width: 10px;
height: 40px;
}
div:after {
width: 40px;
height: 10px;
}
text-align: justify;
, но для короткой фразы не поможет. Распредели слова по отдельным тегам и задай контейнеру display: flex
, justify-content: space-between
display: flex
, flex-direction: row-reverse
, flex-wrap: wrap
. А самим блокам flex: 1 0 50%;
. Вникай во флексы и все получится. <div>
<div>CREATIIVES</div>
<div class="sub-title">
<div>S</div>
<div>U</div>
<div>B</div>
<div>-</div>
<div>T</div>
<div>I</div>
<div>T</div>
<div>L</div>
<div>E</div>
</div>
</div>
.sub-title {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.textwork {
position: fixed;
width: 30%;
right: 40px;
top: 50%;
transform: translateY(-50%);
}
align-items: stretch;
<div class="flex">
<div>1</div>
<div>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
</div>
</div>
.flex {
display: flex;
align-items: stretch;
}
.flex div:first-child {
background: red;
}
.flex div:last-child {
background: green;
}
:before
, :after
, задать им фон, наклонить, отцентрировать. skew
, а потом его содержимое тоже трансформировать с помощью skew
в обратную.