为什么这些 css 样式在 react-native 中创建一个三角形

Question

我正在尝试学习如何使用样式在我的反应原生应用程序中创建不同的形状。我遇到了下面的示例（向下滚动到三角形），它将创建一个三角形。

这是博主用来创建三角形的代码。

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

我已经在我的应用程序中验证了它，它确实画了一个三角形，但我不确定为什么上述样式属性会导致在屏幕上绘制三角形。如果有的话，我应该刚刚看到一个 100 像素的红色方块，因为左右边框颜色是透明的，底部边框是红色的，高度为 100px，左右边框将分别增加 50px。

这些样式如何在屏幕上创建三角形？

Answer 1

基本上边框

不是正方形，而是角落处的梯形，你的宽度为零。

这可能有助于理解：

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

玩弄宽度和高度会显示出它们的真实本质

Answer 2

这是一个非常上帝的问题，首先，看看这个片段。这并没有什么不寻常的。它只是一个仅显示底部边框的div。但是，如果你盯着它，想一想，想象一下隐藏大部分边界，这样剩下的就是一个三角形。如果你删除了除一条边之外的所有内容，我们将剩下一个非常小的三角形。请看一看，希望对您有所帮助。

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

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