Как сверстать такой стул, как на картинке, чтобы ножки не вылезали, а сиденье вылезало за пределы круга?
-
1нужно очень точно обвести сиденье по контуру или же иметь сиденьеотдельной картинкой– Stranger in the QCommented 26 авг. 2019 в 18:19
-
7Самое простое что можно сделать, так просто взять эту картинку и вставить её. А не верстать всё это. В основном так и делают– MoloFCommented 26 авг. 2019 в 18:35
Добавить комментарий
|
2 ответа
Я бы сделал так:
Берём фотку стула (нашёл в инете вот такой)
Далее заходи в ФШ, подставляем под него круг и обрезаем как хотим.
По факту уже всё, сохраняем результат и ставим через <img>
или background
..
Ещё можно сделать круг при помощи элемента.
Но я бы советовал сделать именно как описано выше.
.curcle {
display: block;
width: 200px;
height: 200px;
background: #07f;
border-radius: 100%;
}
.curcle > img {
width: 100%;
height: 100%;
}
<div class="curcle">
<img src="https://i.sstatic.net/V5RYv.png">
</div>
-
Решение неплохое, но вот что делать, если надо, чтобы при скролле ножка стула как бы вылазила из-за круга (эффект parallax). Тут получается никак не сверстать такое. Commented 27 авг. 2019 в 21:30
-
@ДаниилКедров, это нужно было указывать в вопросе. Это уже посложнее.– De.MinovCommented 28 авг. 2019 в 7:38
-
Чисто технически невозможно переплести слои, значит придётся отделять ножки стула от сиденья в фотошопе, а потом при помощи position: absolute; подгонять. По другому наверное никак. Commented 29 авг. 2019 в 10:06
Внимание! Решение НЕ универсальное и ОЧЕНЬ ситуационное. В частности, если фон однородный и вокруг много свободного места (но необязательно).
P.S. Вместо margin можно использовать и transform.
body{
margin:100px;
}
.circle{
width:400px;
height:400px;
border-radius:100%;
background:blue;
position:relative;
}
.circle::before{
content:"";
width:100%;
height:50%;
background:transparent;
border-bottom-left-radius:400px;
border-bottom-right-radius:400px;
border:100px solid #fff;
border-top:0 none;
position:absolute;
bottom:-100px;
left:-100px;
z-index:2;
}
.circle img{
width:100%;
margin:-50px 0 0 -50px;
position:relative;
z-index:1;
transition:margin 0.3s;
}
.circle:hover::before{
opacity:0;
}
.circle:hover img{
margin-top:10px;
}
<div class="circle">
<img src="https://i.sstatic.net/u9vBr.png" alt=" />
</div>