Как создать общий градиент для двух блоков?

Question

OrionOracle

css

Как создать общий градиент для двух блоков?

Как применить градиент к треугольнику вместо красного цвета, сохраняя его связь с родительским элементом? <br/> В качестве примера используется точка calc(100% - 70px), но в реальности градиент должен равномерно распределяться внутри блока с динамической шириной. <br/>

2 ноября 2024 г. 11:42

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы создать общий градиент для двух блоков и применить этот градиент к треугольнику, можно воспользоваться свойством CSS `clip-path`. При этом градиент будет применяться к родительскому элементу, и треугольник будет "вычитаться" из этого элемента.

Вот пример, как это можно сделать:

### HTML

```html
<div class="container">
    <div class="block1"></div>
    <div class="block2"></div>
    <div class="triangle"></div>
</div>
```

### CSS

```css
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    position: relative;
    width: 300px; /* динамическая ширина */
    height: 200px;
    background: linear-gradient(135deg, #6b7f99, #b689dc); /* общий градиент */
}

.block1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%; /* высота первой половины */
}

.block2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* высота второй половины */
}

.triangle {
    position: absolute;
    bottom: 0;
    left: calc(100% - 70px); /* Позиция треугольника */
    width: 0;
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 70px solid transparent; /* Здесь нет цвета, вместо этого будет градиент */
    background: linear-gradient(135deg, #6b7f99, #b689dc); /* тот же градиент */
    clip-path: polygon(0 100%, 50% 0, 100% 100%); /* Создает треугольную форму */
    z-index: 1;
}
```

### Объяснение:

1. **Градиент**: Мы применяем градиент к родительскому элементу `.container`, который служит для обоих блоков как фоновый цвет.

2. **Блоки**: `.block1` и `.block2` занимают верхнюю и нижнюю часть контейнера соответственно. Вы можете настроить их высоту по своему усмотрению.

3. **Треугольник**: Треугольник создается с использованием пустого `div` и свойств `border`. Способы позиционирования обеспечивают его точное размещение. Мы используем `clip-path`, чтобы округлить треугольник и получить желаемую форму. Так как мы используем фон родительского элемента, сам треугольник остаётся прозрачным, но виден благодаря градиенту родителя.

Таким образом, градиент будет выглядеть согласованно во всем контейнере и будет встроен в треугольник.

Answer 2

Например так 
 
 
 Для любого угла градиента