Как сделать css и html такую штуку ? Я что то застрял.
html
<div class="div">
<img src="circle.png" alt="" style="width: 60px; height: 60px;">
</div>
css
.div::before{
content: url("circle_two.png");
}
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКак сделать css и html такую штуку ? Я что то застрял.
html
<div class="div">
<img src="circle.png" alt="" style="width: 60px; height: 60px;">
</div>
css
.div::before{
content: url("circle_two.png");
}
Пример
body {
margin: 50px;
}
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
border-radius: 50%;
overflow: hidden;
}
.circle__img,
.circle:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.circle__img {
object-fit: cover;
}
.circle:before {
content: '';
border-left: 35px solid #00f;
border-radius: 100px;
z-index: 1;
}
<div class="circle">
<img class="circle__img" src="https://www.vbetnews.com/wp-content/uploads/2018/08/Jurgen-Klopp.png" alt="">
</div>
div {
position: relative;
margin: 20px;
width: 150px;
height: 150px;
border-radius: 100%;
}
div img {
width: 150px;
height: 150px;
border-radius: 100%;
}
div:after {
z-index: -1;
content: "";
display: block;
position: absolute;
top: 1px;
left: -15px;
right: 0;
bottom: 0;
width: 170px;
height: 160px;
background-color: #153c5f;
border-radius: 80% 100% 0% 100%;
transform: rotate(-20deg);
clip-path: polygon(90% 0, 35% 90%, 55% 98%, 55% 100%, 0 100%, 0 0);
}
<div><img src="https://quintalk.com/application/files/7515/5006/6802/129.jpg"></div>
.div::before{
content: '';
width: 60px;
height: 60px;
border-radius: 60px;
top: 10px;
left: -10px;
}