0

Подскажите пожалуйста, каким способом правильнее всего будет реализовать данную полосу ниже текста и белый выступ на картинке? Картинка не полностью ровная, а с выступом по середине, на скриншоте хорошо видно.

2 ответа 2

1

body {
  background-color: #282828;
  font-family: Open-Sans, sans-serif;
}

.card {
  width: 380px;
  padding: 75px 0 0;
  background-color: #ffffff;
}
.card h3 {
  padding: 0 45px;
  font-weight: medium;
  font-size: 20px;
  margin-bottom: 15px;
  text-align: center;
}
.card p {
  padding: 0 45px;
  opacity: 0.6;
  text-align: justify;
  margin-bottom: 25px;
}
.card hr {
  width: 30px;
  border: 0;
  height: 1px;
  background-color: #ccc;
}
.card .image {
  margin-top: 35px;
  position: relative;
}
.card .image:before {
  position: absolute;
  content: "";
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #fff transparent transparent;
}
.card .image img {
  width: 100%;
  display: block;
}
<div class="card">
  <h3>VINTAGE OLIVA</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At nobis architecto, fuga fugiat non laborum eum quis consequatur! Eos nulla quae autem iure explicabo quis at tempore a reiciendis, reprehenderit.</p>
  <hr>
  <div class="image">
    <div class="triangle"></div>
    <img src="https://res.cloudinary.com/wnotw/images/c_limit,w_1536,q_auto:best,f_auto/v1546534498/knvswfeaoaui4fkyamjc/bike-king-app-mockup" alt="">
  </div>
</div>

https://jsfiddle.net/g3su59a2/ (Здесь используется препроцессор SASS - удобнее читать будет)

1
  • спасибо большое
    – quires
    Commented 6 сент. 2019 в 20:03
0

Это простой <hr> просто с использованием css.

У тебя должен быть один div, который большой, и в нем еще div, в котором текст, ты ставишь второй div по центру, и получается что выступы. )

.parent {
  border: 1px solid black;
  height: 250px;
  width: 250px;
  position: realitve;
}

.child {
  position: absolute;
  top: 35%;
  left: 25%;
}
<div class="parent">
  <div class="child">text</div>
</div>

В результате получится что-то наподобие.

7
  • немножко не понял вас) то есть мне нужно задать стили для самого текста, чтобы получить белый выступ на картинке?
    – quires
    Commented 6 сент. 2019 в 19:44
  • Добавил код, можете посмотреть.
    – Hayko
    Commented 6 сент. 2019 в 19:48
  • Теперь стало понятно?
    – Hayko
    Commented 6 сент. 2019 в 19:50
  • наверное я не совсем корректно поставил свой вопрос) смотрите, там есть после текста картинка, и над ней есть небольшой вырез в виде треугольника, я имел ввиду это)
    – quires
    Commented 6 сент. 2019 в 19:52
  • Да, скорее всего, потому-что как минимум это не полоса ) . А выступы я правильно понял о чем идет речь?
    – Hayko
    Commented 6 сент. 2019 в 19:53

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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