CSS勾配で図形を作成する

添付画像のようにCSS勾配で応答図形を作成する方法。CSS勾配で図形を作成する

2017-02-21 Mehar

私は勾配について知らないが、あなたはborderプロパティを使用して、それの後に4つのパラメータを渡すCSSで図形を作成することができます。 – xhulio

たとえば次のCSS： 'border-style：solid; border-width：176px 176px 0 176px; border-color：＃1e2e42透明透明透明; '三角形を与える – xhulio

なぜSVGを使用しないのですか？ CSSでは2つの 'div'sを変換するか、@xhulioのように2つの[CSS三角形]（https://css-tricks.com/snippets/css/css-triangle/）を使うのが最も簡単でしょう。 – LuudJacobs

私はHTMLとCSSでこれを行うための例を追加しました。これは、もちろんそれを行うための1つの方法です。

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勾配で図形を作成する

答えて

関連する問題