如何用本机绘制梯形/梯形？

Question

这是CSS在id处的代码工作正常：

public static void Main(string[] args)
{
    string[] fileNames = new string[3] { @"C:\Users\xxx\XMLFile1.xml", @"C:\Users\xxx\XMLFile2.xml", @"C:\Users\xxx\XMLFile3.xml" };

    DataSet dataSet = new DataSet();

    foreach (string str_FileLocation in fileNames)
    {
        XDocument doc = XDocument.Load(str_FileLocation);

        var ns = doc.Root.GetDefaultNamespace();
        var learner = doc.Descendants(ns + "Learner");

        StringReader reader = new StringReader(new XElement("Sample", learner).ToString());   //< = Adding a new XElement is only for the purpose of providing root node to below code for line "ds.ReadXml(reader);"

        //DataTable d = new DataTable();  <= https://social.msdn.microsoft.com/Forums/en-US/1b8c331e-55b7-4cf4-a8ec-c0b24e2a7b3e/datatablereadxmlfilename-throws-an-error-why?forum=adodotnetdataset
        //d.ReadXml(reader);

        DataSet ds = new DataSet();
        ds.ReadXml(reader);

        DataTable dt = ds.Tables[0].Copy();
        dt.TableName = "Learner" + fileNames.ToList().IndexOf(str_FileLocation);

        dataSet.Tables.Add(dt);
    }

    var output = dataSet;  //<= This is your output DataSet that contains 3 individual DataTable for Learner node from each of your xml.
}

但是我在react-native上的代码不起作用：

border-bottom: 100px solid #0000ff80;
border-right: 50px solid transparent;
height: 0;
width: 100px;

<div id="trapezoid"></div>

Answer 1

试试

var Trapezoid = React.createClass({
 render: function() {
return (
  <View style={styles.trapezoid} />
 )
}
})

trapezoid: {
 width: 200,
 height: 0,
 borderBottomWidth: 100,
 borderBottomColor: 'red',
 borderLeftWidth: 50,
 borderLeftColor: 'transparent',
 borderRightWidth: 50,
 borderRightColor: 'transparent',
 borderStyle: 'solid'
} 

有关更多此类形状的信息，请参见days

Answer 2

您可以通过连续矩形和三角形来实现它。

<View style={{ flexDirection: 'row' }}>
   <View style={styles.rectangle} />
   <View style={[styles.triangle, styles.triangleCornerBottomLeft]} />
</View>

const styles = StyleSheet.create({
  rectangle: { width: 100, height: 100, backgroundColor: 'red' },
  triangle: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightWidth: 100,
    borderTopWidth: 100,
    borderRightColor: 'transparent',
    borderTopColor: 'red'
  },
  triangleCornerBottomLeft: {
    transform: [
      {rotate: '270deg'}
    ]
  },
});