使用css創建設計

如何使用css（style）爲我的react-native視圖組件背景創建此設計？使用css創建設計

我希望視圖2的頂部有一條小曲線，並且符合右上角的綠色背景。

只使用borderRadius沒有幫助。圖中頂角被切掉的高度和寬度不一樣。使用borderRadius可以減少相同數量的高度和寬度，但不會產生以下背景。

來源

2017-07-28 Chetan

這種類型的問題在這裏已經問過很多次了，答案是使用SVG或圖像，並且沒有CSS。 –

如果你正在討論react-native，那不是真正的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創建設計

回答

相關問題