Добрый день, может кто подсказать сверстать такой блок а точнее эту изогнутую шапку на блоке?
Ответ
С размерами можно поиграться, но идея примерно такая:
.wrapper {
width: 200px;
height: 20px;
background-color: gray;
margin: 20px auto;
border-radius: 10px;
position: relative;
}
.dot {
position: absolute;
width: 17px;
height: 20px;
background-color: black;
border-radius: 50%;
}
.dot.right {
top: 0;
right: 0;
}
.lorem {
position: absolute;
width: 280px;
height: 150px;
background: linear-gradient(to right, white, silver);
top: 10px;
left: -40px;
box-shadow: 0 0 2px silver;
border-radius: 5px;
text-align: center;
font-size: 40px;
padding-top: 120px;
}
.step {
position: absolute;
width: 166px;
height: 60px;
background-color: gray;
top: 0;
left: 17px;
color: white;
text-align: center;
font-size: 36px;
font-weight: bold;
padding-top: 30px;
}
.romb {
position: absolute;
left: 63px;
top: 53px;
width: 74px;
height: 74px;
background-color: gray;
transform: rotate(-45deg) skew(30deg, 30deg);
}
Комментариев нет:
Отправить комментарий