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

user_5844930 0
Viewed 2878

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

enter image description here

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.

react-native reactjs css javascript
3 Answers
user_48622550

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>

user_86203330

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