Html css无限是如何工作的？

这里有很多不同的CSS形状，我对无限感到特别困惑：

#无限{
位置：相对位置；
宽度：212px；
高度：100px；
}
#无限：之前，
#无限：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：60px；
高度：60px；
边框：20px纯红；
-moz边界半径：50px 50px 0 50px；
边界半径：50px 50px 0 50px；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-ms变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
}
#无限：之后{
左：自动；
右：0；
-moz边界半径：50px 50px 50px 0；
边界半径：50px 50px 50px 0；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}

其中两个：

p1、p2、p3、p4{
边框：20px纯红；
高度：60px；
利润率：20px；
宽度：60px；
}
#p2、p3、p4{
边界半径：50px；
}
#p3，#p4{
边框右上角半径：0；
}
#p4{
变换：旋转（45度）；
}

其中两个：

p1、p2、p3、p4{
边框：20px纯红；
高度：60px；
利润率：20px；
宽度：60px；
}
#p2、p3、p4{
边界半径：50px；
}
#p3，#p4{
边框右上角半径：0；
}
#p4{
变换：旋转（45度）；
}