@mixin filet{ width: 100%; text-align: center; display: inline-flex; width: 100%; align-items: center; &::after{ right: 0; content: " "; width: 50%; height: 0px; border: $border-red; margin-left: 20px; } &::before{ left: 0; content: " "; width: 50%; height: 0px; border: $border-red; margin-right: 20px; } } @mixin filet-b{ width: 100%; text-align: center; display: inline-flex; width: 100%; align-items: center; &::after{ right: 0; content: " "; width: 50%; height: 0px; border: $border-blue; margin-left: 20px; } &::before{ left: 0; content: " "; width: 50%; height: 0px; border: $border-blue; margin-right: 20px; } } @mixin triangle{ position: absolute; z-index: 1; transform: rotate(-135deg); width: 0; height: 0; top: -70px; left: -70px; border: 70px solid $blue; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; } @mixin rotateH{ transform: rotate(90deg); position: absolute; top: -8px; left: -90px; } @mixin arrow{ width: 0!important; height: 0; top: 35px; left: 50%; right: 50%; border: 50px solid white; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; position: absolute; transform: translateX(-50%); }