代码之家 › 专栏 › 技术社区 › Vinayak B

如何创建一个三角形与一个内部弯曲的基地在本地

react-native reactjs css javascript

3

Vinayak B · 技术社区 · 7 年前

如何创建一个三角形使用样式表与内部弯曲的基础?我知道如何使用样式表创建三角形。请考虑以下代码

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

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

3 回复 | 直到 7 年前

1

2

oma 7 年前

https://github.com/react-native-community/react-native-svg

2

Temani Afif 7 年前

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

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

3

1

Sumit Ridhal 7 年前

这里是小提琴: 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>