Попытка установить нижнюю тень прозрачной в треугольниках

Question

У меня есть 2 ручки.Первый не реагирует, потом я понял, что есть другая версия, и она реагирует.

Не реагирующее перо

                @import "compass/css3";

            $dark-blue: #013870;

            @mixin moz-border-colors($color: none) {
              -moz-border-bottom-colors: $color;
              -moz-border-left-colors: $color;
              -moz-border-right-colors: $color;
              -moz-border-top-colors: $color;
            }

            @mixin triangle($color, $order) {
              @extend .triangle;
              border-top-color: $color;
              top: $order * -60px;
              z-index: $order + 1;
            }

            .triangle {
              border-right-color: transparent;
              border-bottom-color: transparent;
              border-left-color: transparent;
              border-style: solid;
              border-width: 600px 600px 0;
              content: "";
              height: 0;
              position: absolute;
              top: 0;
              left: 0;
              width: 0;
              @include moz-border-colors();
              @include filter(drop-shadow(-12px 10px 10px rgba(0, 0, 0, 0.4)));
            }

            .triangle--1 {
                @include triangle(lighten($dark-blue, 10%), 1);
            }

            .triangle--2 {
                @include triangle(lighten($dark-blue, 15%), 2);
            }

            .triangle--3 {
                @include triangle(lighten($dark-blue, 20%), 3);
            }

            .triangle--4 {
                @include triangle(lighten($dark-blue, 25%), 4);
            }

            .triangle--5 {
              @include triangle(lighten($dark-blue, 30%), 5);
                    }

Отзывчивое перо

                @import "compass/css3";

            $dark-blue: #013870;

            @mixin moz-border-colors($color: none) {
              -moz-border-bottom-colors: $color;
              -moz-border-left-colors: $color;
              -moz-border-right-colors: $color;
              -moz-border-top-colors: $color;
            }

            @mixin triangle-padding-top($color, $order) {
              @extend .triangle;
              border-top-color: $color;
              padding-top: 50% - ($order * 5%);
              z-index: $order + 1;
            }

            .triangle--down {
                width: 100%;
                height: 0;
                padding-left:50%;
                position: absolute;
                overflow: hidden;

                &:after {
                  border-style: solid;
                  border-color: transparent;
                  border-width: 100rem 100rem 0;
                  content: "";
                  display: block;
                  height: 0;
                  margin-left:-100rem;
                  margin-top:-100rem;
                  width: 0;
                  @include moz-border-colors();
                  @include filter(drop-shadow(-12px 10px 10px rgba(0, 0, 0, 0.4)));
                }
            }

            .triangle--down__0 {
              @extend .triangle--down;
              @include triangle-padding-top(0);

              &:after {
                border-top-color: $dark-blue;
              }
            }

            .triangle--down__1 {
              @extend .triangle--down;
              @include triangle-padding-top(1);

              &:after {
                border-top-color: lighten($dark-blue, 5%);
              }
            }

            .triangle--down__2 {
              @extend .triangle--down;
              @include triangle-padding-top(2);

              &:after {
                border-top-color: lighten($dark-blue, 10%);
              }
            }

            .triangle--down__3 {
              @extend .triangle--down;
              @include triangle-padding-top(3);

              &:after {
                border-top-color: lighten($dark-blue, 15%);
              }
            }
            .triangle--down__4 {
              @extend .triangle--down;
              @include triangle-padding-top(4);

              &:after {
                border-top-color: lighten($dark-blue, 20%);
              }
            }

Проблема, и я очень старался исправить это от себя, заключается в том, что нижняя тень в каждом треугольнике, в адаптивной версии, кажется, что линия тени внизу, и я не могу скрытьили удалите его.

Большое спасибо за вашу помощь заранее!

Answer 1

мне показалось, что это работает, удалите overflow: hidden; из .triangle--down и измените его на overflow: inherit;

.triangle--down {
    width: 100%;
    height: 0;
    padding-left:50%;
    position: absolute;
    overflow: inherit;
}

Надеюсь, это поможет