Как сверстать стул как на картинке?
106
21 июня 2021, 19:10
Как сверстать такой стул, как на картинке, чтобы ножки не вылезали, а сиденье вылезало за пределы круга?
Answer 1
Я бы сделал так:
Берём фотку стула (нашёл в инете вот такой)
Далее заходи в ФШ, подставляем под него круг и обрезаем как хотим.
По факту уже всё, сохраняем результат и ставим через <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.stack.imgur.com/V5RYv.png">
</div>Answer 2
Внимание! Решение НЕ универсальное и ОЧЕНЬ ситуационное. В частности, если фон однородный и вокруг много свободного места (но необязательно).
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.stack.imgur.com/u9vBr.png" alt=" />
</div>
-
17:01
-
11:24
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47563 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30496 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23632 visits
- Как через css изменить цвет png изображения? 10350 visits
- Blob video url download 9958 visits
- Php curl запрос через прокси с авторизацией 9211 visits
- Работа с captcha vk api 8094 visits
© "hostciti.net" 26.11.2024 | 06:26