7

Как сверстать такой блок, а точнее эту изогнутую шапку на блоке?

введите сюда описание изображения

5
  • 3
    png будет гора-а-аздо быстрее и проще )) но можно, конечно, поизвращаться с css3 и всякими псевдоэлементами 11 янв 2018 в 10:29
  • 1
    Если это не принципиально важно именно сверстать - поддержу того, который сверху. Юзай png, даже если сверстаешь такую штуку - с адаптивностью будет долго и скучно. 11 янв 2018 в 10:48
  • @Klimenkomud картинкой похоже не получится, потому что этот блок в макете не идет отдельным слоем, и их много разных цветов и т. д., так что похоже что нужна таки верстка, а на счет адаптации не страшно оно находится в контейнере бутсрапа, там сам блок-wrap адаптивно сдвинется 11 янв 2018 в 11:00
  • @humster_spb а может svg лучше будет? ) 11 янв 2018 в 18:32
  • @Croessmah, без сомнения :)) 11 янв 2018 в 18:39

3 ответа 3

14

С размерами можно поиграться, но идея примерно такая:

.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);
}
<div class="wrapper">
  <div class="dot left"></div>
  <div class="dot right"></div>
  <div class="lorem">Lorem ipsum dolor sit amet</div>
  <div class="step">ШАГ 1</div>
  <div class="romb"></div>
</div>

3
  • 1
    отлично, спасибо большое! 11 янв 2018 в 12:33
  • в этом решении три лишних элемента: dot left, dot right и romb. Для этих целей нужно использовать :before и :after.
    – cronfy
    17 янв 2018 в 7:24
  • @cronfy, где написано, что "нужно"? 17 янв 2018 в 7:26
6

Какой png? Простые вещи разучились делать...

:root {
  --sizeFillets: 20px;
  --widthLabel: 200px;
  --heightLabel: 150px;
  --colorLabel: grey;
  --colorShadow: black;
}

body {
  display: flex;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

div {
  margin: auto;
  width: var(--widthLabel);
  height: var(--heightLabel);
  background-color: var(--colorLabel);
  position: relative;
}

div::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  width: 100%;
  height: 0;
  box-sizing: border-box;
  border-style: solid;
  border-color: transparent;
  border-width: var(--sizeFillets) calc(var(--widthLabel)/2) 0 calc(var(--widthLabel)/2);
  border-top-color: var(--colorLabel);
}

span {
  position: relative;
  display: block;
  left: calc(var(--sizeFillets)/-2);
  top: calc(var(--sizeFillets)/-2);
  width: calc(100% + var(--sizeFillets));
  height: calc(var(--sizeFillets)/2);
  background-color: var(--colorLabel);
}

span::after,
span::before {
  content: '';
  position: absolute;
  left: calc(var(--sizeFillets)/-2);
  width: var(--sizeFillets);
  height: calc(var(--sizeFillets)/2);
  border-radius: var(--sizeFillets) var(--sizeFillets) 0 0;
  background-color: var(--colorShadow);
}

span::after {
  left: calc(100% + var(--sizeFillets)/-2);
}
<div>
  <span></span>
</div>

3
  • а скошенные углы внизу где? 11 янв 2018 в 11:14
  • а разве вопрос был про это? мне показалось у автора проблемы с закруглением... 11 янв 2018 в 17:48
  • ребятам, которые предлагали правки. отклонено, потому что размеры в пикселях, а нужно на css-переменных сделать. 11 янв 2018 в 17:51
5

Предложу свой вариант.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  font-size: 1.5rem;
  font-family: sans-serif;
  line-height: 1.5;
}
.badge {
  background: linear-gradient(to right, white, silver);
  padding: 5rem 1rem 1rem;
  border: 1px solid lightgray;
  border-radius: 5px;
  position: relative;
  z-index: 50;
}
/* Левый и правый изгибы */
.badge:before,
.badge:after {
  content: '';
  width: 17px;
  height: 10px;
  position: absolute;
  top: -10px;
  background: #000;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
/* Позиция левого изгиба */
.badge:before {
  left: 48px;
}
/* Позиция правого изгиба */
.badge:after {
  right: 48px;
}
.badge__flag {
  background: gray;
  position: absolute;
  top: 0;
  margin: auto 4rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  color: #eee;
  padding: 1rem;
}
/* Нижняя и верхняя части стрелки */
.badge__flag:before,
.badge__flag:after {
  content: '';
  position: absolute;
}
/* Верхняя часть стрелки */
.badge__flag:before {
  top: -10px;
  left: -5%;
  width: 110%;
  height: 10px;
  background: gray;
  z-index: -5;
}
/* Нижняя часть стрелки */
.badge__flag:after {
  bottom: -15px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 15px solid gray;
  border-left: 94px solid transparent;
  border-right: 100px solid transparent;
}
<div class="badge">
  <p class="badge__flag">Шаг 1</p>
  <p class="badge__copy">
    Lorem ipsum dolor sit amet
  </p>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.