css3 - Creating design using css -


how can create design react-native view component background using css (style)?

i want view 2 have green background little curve on top meets top right in center.

using borderradius did not help. height , width top corners being cut off not same in diagram. using borderradius reduces same amount of height , width corner not product below background.

enter image description here

i used border-radius: 70%/100px 100px 0 0; attain similar type of curve in figure. here full 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; } 

here link fiddle hope got answer!thanks.


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -