爲什麼這些css樣式在反應本機中創建三角形

我正試圖學習如何使用樣式在我的react-native應用程序中創建不同形狀。我遇到了下面的example（向下滾動到三角形），這將創建一個三角形。爲什麼這些css樣式在反應本機中創建三角形

這是博客用來創建三角形的代碼。

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像素的紅色正方形，因爲左側和右側的邊框顏色是透明的，底部邊框是紅色的，高度爲100像素，左邊框和右邊框每個都會增加50像素。

這些樣式如何在屏幕上創建一個三角形？

來源

2017-10-11 Varun Gupta

通過這個計算器鏈接https://stackoverflow.com/questions去/ 7073484/how-do-css-triangles-work –

[CSS三角形如何工作？]（https://stackoverflow.com/questions/7073484/how-do-css-triangles-work） –

基本上邊界不是正方形，而是在角落trapizoids，你只是有一個零寬度。

這可能有助於理解：

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

與寬度和高度演奏會展示自己的真性情

來源

2017-10-11 04:24:49

首先這是一個非常神的問題，看看這個片段。這並不太平常。這只是一個只顯示底部邊界的div。但是，如果你盯着它並考慮它，想象一下隱藏大部分邊界，以便留下的是三角形。如果除了其中一個邊緣以外的其他部分，我們會留下一個非常小的三角形。請看看希望它對你有幫助。

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

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

來源

2017-10-11 04:22:41

爲什麼這些css樣式在反應本機中創建三角形

回答

相關問題