Why do these css styles create a triangle in react-native

Question

I am trying to learn how to create different shapes in my react-native app using styling. I came across the below example (scroll down to triangle) which will create a triangle.

This is the code that the blogger has used to create a triangle.

var Triangle = React.createClass({
  render: function() {
    return (
      <View style={[styles.triangle, this.props.style]} />
    )
  }
})
  triangle: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: 'red'
  }

I have verified it in my app and it does draw a triangle but I am not sure why do the above styling properties result in a triangle being drawn on the screen. If anything, I should have just seen a 100 px red square because the left and right border colors are transparent and the bottom border is red with a height of 100px and the left and the right border would add 50px each.

How do these styles create a triangle on the screen?

Go through this stackoverflow link https://stackoverflow.com/questions/7073484/how-do-css-triangles-work — Suresh Ponnukalai, Oct 11 '17 at 04:29
Possible duplicate of [How do CSS triangles work?](https://stackoverflow.com/questions/7073484/how-do-css-triangles-work) — Suresh Ponnukalai, Oct 11 '17 at 04:29
Check out this link to get a detailed answer. [Click Here](https://stackoverflow.com/a/70528904/17794298) — Faizan Muhammad, Dec 30 '21 at 08:33
Check out this link to get details. [Click Here](https://stackoverflow.com/a/70528904/17794298) — Faizan Muhammad, Dec 30 '21 at 08:35

score 2 · Accepted Answer · answered Oct 11 '17 at 04:24

Basically borders are not squares but are trapizoids at the corners, yours just have a width of zero.

this may help understand:

    
#tri {
    width: 0px;
    background: antiquewhite;
    border-top: 60px solid transparent;
    border-bottom: 60px solid blue;
    border-left: 60px solid green;
    border-right: 65px solid green;
}

<div id="tri""></div>

Playing with the width and height will show their true nature

score 1 · Answer 2 · answered Oct 11 '17 at 04:22

That's a very god question firstly, Check out this snippet. This isn't anything too out of the ordinary. It's just a div that is only displaying a bottom border. But, if you stare and it and think about it, imagine hiding most of that border so that what's left is a triangle. If you removed all of it except one of the edges, we'd have a very little triangle left over. Please take a look hope it is helpful to you.

div {
width:100px;height:50px;
border-color: transparent transparent #222 transparent;
border-style: solid; 
border-width: 6px; 
}

<div style="">
  test
</div>

Why do these css styles create a triangle in react-native

2 Answers2