Подскажите пожалуйста, каким способом правильнее всего будет реализовать данную полосу ниже текста и белый выступ на картинке? Картинка не полностью ровная, а с выступом по середине, на скриншоте хорошо видно.
2 ответа
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 - удобнее читать будет)
Это простой <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>
В результате получится что-то наподобие.
-
немножко не понял вас) то есть мне нужно задать стили для самого текста, чтобы получить белый выступ на картинке?– quiresCommented 6 сент. 2019 в 19:44
-
-
-
наверное я не совсем корректно поставил свой вопрос) смотрите, там есть после текста картинка, и над ней есть небольшой вырез в виде треугольника, я имел ввиду это)– quiresCommented 6 сент. 2019 в 19:52
-
Да, скорее всего, потому-что как минимум это не полоса ) . А выступы я правильно понял о чем идет речь?– HaykoCommented 6 сент. 2019 в 19:53