css Infinityはどのように機能しますか？

Question

here're異なる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

2：

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