Всем привет. Подскажите, пожалуйста, каким способом лучше и легче реализовать данное дело?
1 ответ
Лучше, наверное, SVG, но можно и стилями. Грязно получилось, но направление вот:
body {
padding: 0;
margin: 0;
background: linear-gradient(135deg, #000000 0%, #771618 50%, #7a1315 60%, #300e12 100%);
}
.pocket {
background-color: #ccc;
height: 100px;
width: 100%;
border-width: 2px;
border-style: solid solid none;
border-color: #888;
border-radius: 25px 25px 0 0;
margin-top: 100px;
text-align: center;
opacity: 0.35;
}
.bulb {
background-color: #ccc;
height: 100px;
width: 100px;
border-radius: 50px;
border: 2px solid #888;
position: relative;
clip-path: polygon(-50% 0, 150% 0, 150% 50%, -50% 50%);
display: inline-block;
transform: translateY(-50%);
}
.bulb:before,
.bulb:after {
content: "";
width: 25px;
height: 25px;
border-bottom-right-radius: 25px;
border-color: #888;
border-width: 2px;
border-style: none solid solid none;
position: absolute;
bottom: 50%;
box-shadow: 0 0 0 10px #ccc;
clip-path: polygon(0 10px, 100% 10px, 100% 100%, 0 100%);
}
.bulb:before {
left: -23px;
}
.bulb:after {
right: -23px;
transform: scalex(-1)
}
.pocketcontnent {
margin-top: -125px;
text-align: center;
z-index: 1;
position: relative;
}
.button {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: #888;
display: inline-block;
position: relative;
}
.button:before,
.button:after {
width: 4px;
height: 20px;
background-color: #fff;
content: "";
position: absolute;
top: 16px;
left: 23px;
}
.button:before {
transform: rotate(45deg);
}
.button:after {
transform: rotate(-45deg);
}
<div class="pocket">
<div class="bulb">
</div>
</div>
<div class="pocketcontnent">
<div class="button">
</div>
</div>