javascript - How to create a triangle shape with an inner curved base in React Native

how to create a triangle using style sheet with an inner curved base ? I know how to create a triangle by using style sheet . Please consider following code

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

this will be a normal triangle. but my question is how can I bent one side of this triangle just like below image

I already tried using border Radius, But it will only curve outer circle way. I want an inner circle curve. Please help me to achieve this.

how to create a triangle using style sheet with an inner curved base ? I know how to create a triangle by using style sheet . Please consider following code

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

this will be a normal triangle. but my question is how can I bent one side of this triangle just like below image

I already tried using border Radius, But it will only curve outer circle way. I want an inner circle curve. Please help me to achieve this.

Share Improve this question edited Oct 22, 2018 at 11:44 asked Oct 22, 2018 at 11:29 Vinayak B 4,5204 gold badges32 silver badges59 bronze badges

1 I don't think there's any reasonable way to achieve this with CSS. Use an SVG instead. – user5734311 Commented Oct 22, 2018 at 11:31
some ideas : stackoverflow./questions/51341515/… / stackoverflow./questions/52920418/… – Temani Afif Commented Oct 22, 2018 at 11:33
another one : stackoverflow./questions/52353649/… – Temani Afif Commented Oct 22, 2018 at 11:39
is radial-gradient supported by react native? – Vinayak B Commented Oct 22, 2018 at 11:39
don't know, that's why I only shared some ideas ..you can probably try it and see ;) – Temani Afif Commented Oct 22, 2018 at 11:40

| Show 2 more ments

3 Answers 3

Sorted by: Reset to default 3

This is not a good solution, better use SVG. There is an excelent svg module, developed by react-native munity and up to date: https://github./react-native-munity/react-native-svg

You can consider a solution with a pseudo element but without transparency:

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

You can overlay the side of arrow using a circle. this way you can hide the part you don't wanna show. The hack is to the same color as background for body or parent container.

Here fiddle: https://jsfiddle/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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to create a triangle shape with an inner curved base in React Native - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)