CSSを使用したデザインの作成

css（スタイル）のみを使用して、反応ネイティブのビューコンポーネントの背景に対してこのデザインを作成するにはどうすればよいですか？CSSを使用したデザインの作成

私はビュー2に中央の右上に合った上に小さなカーブを持つ緑色の背景が欲しいです。

borderRadiusを使用しても役に立ちませんでした。この図では上コーナーから切り取られた高さと幅は同じではありません。 borderRadiusを使用すると、下のバックグラウンドを生成しないコーナーから同じ高さと幅の幅を減らすことができます。

出典

2017-07-28 Chetan

このタイプの質問はここで何度も尋ねられました。答えはSVGまたはImagesを使用しており、CSSはありません。 –

あなたが反応ネイティブについて話しているなら、それは本当のCSSではなく、ただシミュレートされたものです。私はあなたがこれをイメージしなければならないと思う。 – Val

このリンクを参照してくださいhttps://github.com/arunkumarrmrj/react-native-styling-cheat-sheet – Arunkumar

私はあなたの図の曲線の同様のタイプを達成するためにborder-radius: 70%/100px 100px 0 0;を使用。

HTML

<body> 
    <div id="white"> 
     <div id="view1"> 
      <div id="text1"> 
       View 1 
      </div> 
     </div> 
     <div id="view2"> 
      <div id="round"> 
       <div id="text2"> 
        VIEW 2 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

CSSここで

#white { 
    background-color: white; 
} 

#view1 { 
    text-align: center; 
    height: 100px; 
    width: 500px; 
    border: 2px solid; 
} 

#view2 { 
    text-align: center; 
    height: 300px; 
    width: 500px; 
    border: 2px solid; 
} 

#text1, 
#text2 { 
    padding-top: 42px; 
} 

#round { 
    background-color: green; 
    width: 500px; 
    margin: 0 0px; 
    height: inherit; 
    border-radius: 70%/100px 100px 0 0; 
}

私link は、あなたの答えを得たホープいじるのおかげです！はここに私の完全なコードです。

出典

2017-07-28 09:13:58

CSSを使用したデザインの作成

答えて

関連する問題