2017-02-21 16 views
0

Как мы можем создать отзывчивую форму с градиентом css, как приложенное изображение.Создание фигур с градиентом css

enter image description here

+0

я не знаю о градиенте, но вы можете создать формы с помощью CSS, используя свойство границы и прохождения 4 параметра после него. – xhulio

+0

, например, следующий css: 'border-style: solid; border-width: 176px 176px 0 176px; border-color: # 1e2e42 прозрачный прозрачный прозрачный; 'даст треугольник – xhulio

+0

Почему бы не использовать SVG? В CSS, вероятно, проще всего преобразовать два 'div' или попытаться использовать два [CSS-треугольника] (https://css-tricks.com/snippets/css/css-triangle/), как упомянуто @xhulio. – LuudJacobs

ответ

2

Я добавил пример для этого с HTML и CSS. Это, конечно, один из способов сделать это.

div{ 
 
    
 
    height: 15px; 
 
    
 
    width: 50%; 
 
    
 
    background-color: black; 
 
    
 
    position: absolute; 
 
    
 
    top: 0; 
 
    
 
} 
 

 
.left{ 
 
    
 
    transform-origin: top right; 
 
    transform: rotate(-5deg); 
 
    
 
} 
 

 
.right{ 
 
    
 
    left: 50%; 
 
    
 
    transform-origin: top left; 
 
    transform: rotate(5deg); 
 
    
 
}
<div class="left"></div> 
 
<div class="right"></div>