2016-09-13 24 views
-1

CSSを使用して不規則な形を作成しました。 今、私の質問は、どのように私は同じ形状を作成することができますが、応答します。割合で
https://jsfiddle.net/jobgaraux/rpfg64vq/CSS:応答の良い不規則な形の作成方法

 #myForm{ 
width: 800px; 
height: 300px; 
position: relative; 
background-color: #A0A0A0; 
    color: #fff; 
    font-size: 2.4em; 
    font-weight: 700; 

} 

...and so on 
+0

利用勾配:ここ

はリンクです。 –

+0

はフィドルを提供します。あなたが作ったのは長方形だけですか?これはどのように不規則な形ですか? – Deadpool

+0

こんにちは、800pxの代わりにフィドルリンク – Daniel

答えて

0

#myForm{ 
 
    max-width: 100%; 
 
    width: 800px; 
 
    height: 300px; 
 
    position: relative; 
 
    background-color: #A0A0A0; 
 
    color: #fff; 
 
    font-size: 2.4em; 
 
    font-weight: 700;  
 
} 
 
     
 
      #myForm span{ 
 
    display:inline-block; 
 
      vertical-align: middle; 
 
} 
 
    
 
     
 
     
 
     
 
    
 

 
#myForm::before{ 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 0 120px 800px; 
 
    border-color: transparent transparent #fff transparent; 
 
} 
 

 
#myForm::after{ 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 80px 300px 0; 
 
    border-color: transparent #fff transparent transparent; 
 
}
<div id="myForm"></div>

+0

使用:max-width:100%; – hamidrun

+0

使用:最大幅:100%;または@mediaのみの画面と(最大幅:800px){} – hamidrun

関連する問題