css Infinity如何工作？

Question

我這裏還有很多不同的CSS在CSS Tricks - Shapes of CSS形狀結束了，我感到特別困惑與無限：

#infinity { 
 
    position: relative; 
 
    width: 212px; 
 
    height: 100px; 
 
} 
 

 
#infinity:before, 
 
#infinity:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 60px; 
 
    height: 60px; 
 
    border: 20px solid red; 
 
    -moz-border-radius: 50px 50px 0 50px; 
 
    border-radius: 50px 50px 0 50px; 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 

 
#infinity:after { 
 
    left: auto; 
 
    right: 0; 
 
    -moz-border-radius: 50px 50px 50px 0; 
 
    border-radius: 50px 50px 50px 0; 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
}

<div id="infinity"></div>

如何以及爲什麼這行得通？

Answer 1

的其中兩個：

#p1, #p2, #p3, #p4 { 
 
    border: 20px solid red; 
 
    height: 60px; 
 
    margin: 20px; 
 
    width: 60px; 
 
} 
 

 
#p2, #p3, #p4 { 
 
    border-radius: 50px; 
 
} 
 

 
#p3, #p4 { 
 
    border-top-right-radius: 0; 
 
} 
 

 
#p4 { 
 
    transform: rotate(45deg); 
 
}

<div id="p1"></div> 
 
<div id="p2"></div> 
 
<div id="p3"></div> 
 
<div id="p4"></div>