<div>
<img>
</div>
div {
background: red;
display: inline-block;
}
img {
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}
В качестве ширины флекс-контейнера (570px) задаю сумму ширин флекс-элементов (390px + 180px).
margin: 0 auto
элементу .subscribe-form
, например. <button class="btn" data-hover-text="hello, world!!"></button>
.btn {
border: 0;
background: green;
display: inline-block;
width: 3em;
height: 3em;
border-radius: 1.5em;
overflow: hidden;
transition: width 0.2s linear;
}
.btn::before {
display: inline-flex;
width: 100%;
height: 100%;
color: white;
justify-content: center;
align-items: center;
white-space: nowrap;
transition: letter-spacing 0.2s linear;
letter-spacing: -2px;
content: ">";
}
.btn:hover {
width: 10em;
}
.btn:hover::before {
letter-spacing: 0px;
content: attr(data-hover-text);
}
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
</div>
.wrapper {
display: flex;
justify-content: space-evenly;
border: 1px solid black;
height: 200px;
}
.wrapper .item {
border: 1px solid black;
width: 40%;
height: 20%;
position: relative;
top: 70%;
}
border: none
ему:.a-image {
border: none;
}
<a class="a-image"><img src="...
<div class="xxx"><span>hello, world!!</span></div>
<div class="xxx"><span>fuck the world</span></div>
<div class="xxx"><span>fuck everything</span></div>
<div class="xxx"><span>69</span></div>
<div class="xxx"><span>187</span></div>
<div class="xxx"><span>666</span></div>
.xxx {
display: inline-block;
width: 250px;
}
.xxx > span {
background: #ddf;
}