创建形状与CSS梯度

我们如何创建CSS渐变，如附加的图像的响应形状。创建形状与CSS梯度

2017-02-21 Mehar

我不知道关于梯度，但您可以创建使用border属性和之后传递4个参数的CSS形状。 – xhulio

例如下面的css： 'border-style：solid; border-width：176px 176px 0 176px; 边框颜色：＃1e2e42透明透明透明;'会给一个三角形 – xhulio

为什么不使用SVG？在CSS它可能最容易被改造两个'div's或尝试使用两个[CSS三角形]就像提到@xhulio（https://css-tricks.com/snippets/css/css-triangle/）。 – LuudJacobs

我添加了一个例子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>

来源

2017-02-21 10:08:12 LuudJacobs

创建形状与CSS梯度

回答

相关问题