Erstellen von Design mit CSS

Wie kann ich dieses Design für meine Reaktion native Ansicht Komponente Hintergrund nur mit CSS (Stil) erstellen?Erstellen von Design mit CSS

Ich möchte die Ansicht 2 grünen Hintergrund mit einer kleinen Kurve oben haben, die oben rechts in der Mitte trifft.

mit nur borderRadius hat nicht geholfen. die Höhe und Breite von den oberen abgeschnittenen Ecken ist in dem Diagramm nicht gleich. Mit borderRadius wird der gleiche Betrag an Höhe und Breite von der Ecke reduziert, die nicht den unteren Hintergrund erzeugt.

Quelle

2017-07-28 Chetan

Diese Art von Frage wurde hier oft gestellt, und die Antwort ist entweder SVG oder Bilder und es gibt kein CSS dafür. –

Wenn Sie reaction-native sprechen, ist es kein echtes CSS, sondern nur ein simuliertes. Ich denke, du musst ein Bild dafür machen. – Val

Siehe diesen Link https://github.com/arunkumarrmrj/react-native-styling-cheat-sheet – Arunkumar

verwendet I border-radius: 70%/100px 100px 0 0; ähnliche Art der Kurve in der Figur zu erreichen. Hier ist meine vollständige Code:

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; 
}

Hier ist meine link Geige Hoffe, Sie haben Ihre Antwort Vielen Dank!.

Quelle

2017-07-28 09:13:58

Erstellen von Design mit CSS

Antwort

Verwandte Themen