Question

我正在尝试学习如何使用样式在我的react-native应用程序中创建不同的形状。我遇到了下面的example（向下滚动到三角形），这将创建一个三角形。

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

(\w{3})\W{2}(\d{4})\W{2}(\w{6})\W{2}(\d{2})\W{2}(.*)

^^ is the delimiter but can be any other value also.

我已经在我的应用中验证了它并且它确实绘制了一个三角形，但我不确定为什么上面的样式属性导致在屏幕上绘制三角形。如果有的话，我应该看到一个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>

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

2 个答案: