个人中心
gpt4 book ai didi

css - 使用 css 创 build 计

转载 作者：行者123 更新时间：2023-11-28 03:18:00 26 4
gpt4 key购买 nike

如何仅使用 css(样式)为我的 react-native View 组件背景创建此设计？

我希望 View 2 具有绿色背景，顶部有一条小曲线，与右上角的中心相交。

仅使用 borderRadius 没有帮助。被切断的顶 Angular 的高度和宽度在图中是不一样的。使用 borderRadius 从不产生以下背景的 Angular 减少相同数量的高度和宽度。

enter image description here

最佳答案

我使用 border-radius: 70%/100px 100px 0 0; 在你的图中获得相似类型的曲线。这是我的完整代码:

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

这是我的 link摆弄希望你能得到答案!谢谢。

关于css - 使用 css 创 build 计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45363373/

26 4 0
文章推荐： javascript - 为什么这不起作用(没有 Node 的 React)？
文章推荐： c++ - 继承类结构是什么样的？
文章推荐： javascript - 从层次结构 MySQL 表生成 HTML 列表
文章推荐： c++ - Doxygen 文档注释#define
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com