Incorrect ribbon CSS (container, side right)

[jpvillaisaza]

When using the current CSS for ribbon, I get something like this:

After taking a look at the code, I think the border-left-color should me moved from container__side to container__side--left and a similar border-right-color should be added to container__side--right:

 .container__side {
     bottom: -8px;
     position: absolute;

     /* Displayed under the container */
     z-index: -1;

     /* Background */
     border: 16px solid #CCC;
-    border-left-color: transparent;
 }

 .container__side--left {
     /* Position */
     left: -24px;
+
+    border-left-color: transparent;
 }

 .container__side--right {
     /* Position */
     right: -24px;
+
+    border-right-color: transparent;
 }

Which makes it look like this:

Should that be the correct CSS for ribbon?

Adding transform: scaleX(-1) to container__side--right also works for me, but I'm not sure which way is better.