如何在 React Native 中创建具有内部弯曲底部的三角形答案

【问题标题】：How to create a triangle shape with an inner curved base in React Native如何在 React Native 中创建具有内部弯曲底部的三角形
【发布时间】：2018-10-22 11:29:48
【问题描述】：

如何使用带有内部弯曲底座的样式表创建三角形？我知道如何使用样式表创建三角形。请考虑以下代码

 triangleShapeLeft: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: halfHeight / 3,
    borderRightWidth: halfHeight / 3,
    borderBottomWidth: halfHeight / 2,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: "#000",
    transform: [
      { rotate: '270deg' }
    ],
    margin: 0,
    marginLeft: 0,
    borderWidth: 0,
    borderColor: "transparent",
    position: "absolute",
    left: -arrowBottom - padddingVertical,
    top: halfHeight - padddingVertical,
  }

这将是一个正常的三角形。但我的问题是我怎样才能像下图一样弯曲这个三角形的一侧

我已经尝试过使用边框半径，但它只会弯曲外圆方式。我想要一个内圆曲线。请帮助我实现这一目标。

【问题讨论】：

我认为没有任何合理的方法可以使用 CSS 实现这一目标。请改用 SVG。
一些想法：stackoverflow.com/questions/51341515/… / stackoverflow.com/questions/52920418/…
另一个：stackoverflow.com/questions/52353649/…
react native 是否支持径向渐变？
不知道，所以我只分享了一些想法..你可能可以试试看;)

标签： javascript css reactjs react-native

【解决方案1】：

这不是一个好的解决方案，最好使用 SVG。有一个优秀的 svg 模块，由 react-native 社区开发并且是最新的： https://github.com/react-native-community/react-native-svg

【讨论】：

问题是我正在创建一个纯 JavaScript 库。我不想使用任何本机特定代码。这就是我依赖样式表的原因
那么为什么要在问题中添加 react-native 标签？ :D
它是 react-native 库，但没有任何 iOS 或 android 特定代码。这就是为什么我不能使用 svg。

【解决方案2】：

您可以考虑使用伪元素但没有透明度的解决方案：

.arrow {
  margin: 20px;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background: #000;
  transform: rotateX(50deg) rotate(-45deg);
  position: relative;
  overflow:hidden;
  z-index:0;
}

.arrow:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 160%;
  width: 160%;
  border-radius: 90% 0 0 0;
  background: #fff;
}

<div class="arrow">
</div>

【讨论】：

似乎很有希望。让我在 react-native 上试试这个

【解决方案3】：

您可以使用圆圈覆盖箭头的一侧。这样你就可以隐藏你不想显示的部分。 hack 与正文或父容器的背景颜色相同。

这里小提琴：https://jsfiddle.net/sumitridhal/rod6hn0b/

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Arrow</title>
  <style type="text/css">
    html, body {
    margin: 0px;
    padding: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    color: #333333;
}

.row {
    width: 500px;
    clear: both;
    margin: 20px auto;
}

.arrow.right {
    width: 0px;
    height: 0px;
    border: 50px solid transparent;
    border-top-color: #446CB3;
    margin: 0;
    padding: 0;
    float: left;
    transform: rotate(270deg) translate(0px, 25px);
}

.arrow:before {
    content: '';
    height: 140px;
    width: 70px;
    border-bottom-right-radius: 140px;
    border-top-right-radius: 140px;
    background: #ffffff;
    display: inline-block;
    transform: rotate(90deg) translate(-135px, 35px);
}
  </style>

</head>
<body>
  <div class="row" style="
    overflow: hidden;
">
  <div class="arrow right" style="
    /* overflow: hidden; */
"></div>
</div>

</body></html>

【讨论】：