Сверстал данную секцию при помощи грид сетки, но появилась проблема не могу сделать линию посередине, использовал ::after но добавляет под нижний текст, border-right не вариант, потому что линия градиент.
1 ответ
Чуть-чуть ты с :after недоработал. Держи:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 21px;
background-color: #555;
color: #fff;
padding: 10px;
}
.block {
background: rgba(255, 255, 255, 0.1);
padding: 30px 0;
text-align: center;
position: relative;
}
.block.with_separator:after {
content: "";
position: absolute;
top: 0;
right: -12px;
height: 100%;
width: 3px;
background: linear-gradient(to bottom, #9b1f21 0%, #e2e2e2 100%);
}
<div class="grid">
<div class="block with_separator">Block 1</div>
<div class="block with_separator">Block 2</div>
<div class="block">Block 3</div>
</div>
-
я понимаю значения right 12, но это немного странно выгляди, как я считаю все же проще создать третий блок с шириний 1px – filicaliva 31 июл '19 в 19:21
-
1можно, конечно. но представьте себе, что у вас не полный контроль над HTML страницы, например, используется какой-нибудь фреймворк, CMS, или платформа повышенной дебильности (наподобие SalesForce+Lightning), или просто надо обстилить, не трогая структуру... – Инквизитор 1 авг '19 в 20:07