使用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创建设计

回答

相关问题