Question

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

 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,
  }

这将是一个正常的三角形。但是我的问题是，如何像下面的图像一样弯曲该三角形的一侧

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

Answer 1

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

Answer 2

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

 db.requests.getAllEmployees()

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

Answer 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>

如何在React Native中使用内部弯曲的基础创建三角形

3 个答案: