<div class="container">
<div class="item">
<div class="item__content">
Пример с одной кнопкой
</div>
<div class="item__decor">
<div class="item__line item__line_left"></div>
<div class="item__line item__line_right"></div>
</div>
<div class="item__btn">
<button>Копка</button>
</div>
</div>
<div class="item">
<div class="item__content">
Пример с двумя кнопками
</div>
<div class="item__decor">
<div class="item__line item__line_left"></div>
<div class="item__line item__line_right"></div>
</div>
<div class="item__btn">
<button>Купить</button>
<button>Сравнить</button>
</div>
</div>
<div class="item">
<div class="item__content">
Пример с двумя кнопками одна под одной
</div>
<div class="item__decor">
<div class="item__line item__line_left"></div>
<div class="item__line item__line_right"></div>
</div>
<div class="item__btn item__btn_col">
<button>Скачать с сайта</button>
<button>Скачать с облака</button>
</div>
</div>
</div>
.container {
max-width: 800px;
margin: 0 auto;
}
.item {
display: flex;
align-items: center;
padding: 10px 5px;
}
.item__content {
font-size: 16px;
padding: 5px;
}
.item__decor {
flex-grow: 1;
display: flex;
align-items: center;
flex-direction: column;
}
.item__line {
height: 5px;
background-color: red;
width: 80%;
}
.item__line_left {
align-self: flex-start;
margin: 1px 0;
transform: skewX(20deg);
background-color: orange;
filter: drop-shadow(5px -3px 1px rgba(100,0,0,0.3));
}
.item__line_right {
align-self: flex-end;
margin: 1px 0;
transform: skewX(-20deg);
background-color: green;
filter: drop-shadow(-5px 3px 1px rgba(100,0,0,0.3));
}
.item__btn {
padding: 5px;
}
.item__btn_col {
display: flex;
flex-direction: column;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.