.preim {
background-color: #292929;
position: relative; }
.preim__caption {
color: white;
font-family: 'Proxima_Nova_Semibold', sans-serif;
font-size: 30px;
width: 488px;
margin-left: 170px;
padding-bottom: 50px; }
.preim__items {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 70px; }
.preim__item {
width: 20%;
text-align: left;
padding: 0 30px; }
.preim__title {
color: white;
font-family: "Proxima_Nova";
font-size: 18px;
padding: 15px 0 20px; }
.preim__disc {
color: #e8e7e7;
font-family: "Proxima_Nova";
font-size: 13px;
font-weight: 300;
line-height: 15px;
width: 170px; }
.preim__icon {
width: 68px;
height: 68px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
position: relative;
z-index: 3; }
.preim__icon img {
border-radius: 50%;
background-color: #27a4ff;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto; }
.preim__icon-block {
background: red;
width: 100px;
position: relative;
z-index: 2; }
.preim__lines {
position: absolute;
top: 144px;
width: 90%;
z-index: 1; }
.preim__line {
width: 85%;
height: 0px;
border-bottom: 3px dashed #27a4ff;
position: relative;
margin-top: 35px;
margin-bottom: 20px;
margin: 0; }
.preim__line:after {
content: "";
border-left: 10px solid #27a4ff;
border-right: 0px solid transparent;
border-top: 8px solid transparent;
border-bottom: 5px solid transparent;
position: absolute;
left: 100%;
top: -5px; }
@mixin line {
width: 85%;
height: 0px;
border-bottom: 3px dashed #27a4ff;
position: relative;
margin-top: 35px;
margin-bottom: 20px
}
@mixin lineAfter {
content: "";
border-left: 10px solid #27a4ff;
border-right: 0px solid transparent;
border-top: 8px solid transparent;
border-bottom: 5px solid transparent;
position: absolute;
left: 100%;
top: -5px;
}
<section class="preim">
<div class="preim__lines">
<div class="preim__line"></div>
</div>
<div class="container">
<div class="preim__caption">Несколько преимуществ и причин, почему выбирают именно нас:</div>
<div class="preim__items">
<div class="preim__item">
<div class="preim__icon"><img src="../img/preim/adv_icon_1.png" width="50px" height="50px" alt="img1"/></div>
<div class="preim__title">Приемлемая цена</div>
<p class="preim__disc">Компания осуществляет международные автомобильные перевозки уже более 10 лет. </p>
</div>
<div class="preim__item">
<div class="preim__icon"><img src="../img/preim/adv_icon_2.png" width="50px" height="50px" alt="img2"/></div>
<div class="preim__title">Скорость работы</div>
<p class="preim__disc">Компания осуществляет международные автомобильные перевозки уже более 10 лет.</p>
</div>
<div class="preim__item">
<div class="preim__icon-block">
<div class="preim__icon"><img src="../img/preim/adv_icon_3.png" width="50px" height="50px" alt="img3"/></div>
</div>
<div class="preim__title">Свои грузчики</div>
<p class="preim__disc">Компания осуществляет международные автомобильные перевозки уже более 10 лет. </p>
</div>
</div>
</div>
</section>.
告诉我用什么简单的方法来制作如图所示的蓝色小时。我想到了伪元素,但这并不方便。
问题如何在hr上方制作红色背景?z-index 没有帮助
1 个回答