html - 尝试在三 Angular 形中设置底部阴影透明

Question

我有两支笔。第一个没有响应，后来我发现还有另一个版本，它是响应式的。

Not responsive pen

                @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);
                    }

Responsive pen

                @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%);
              }
            }

问题是每个三 Angular 形的底部阴影，在响应式版本中，它看起来像底部的阴影线，我无法隐藏或删除它，我非常努力地自己解决了这个问题。

非常感谢您的提前帮助!

Answer 1

这似乎对我有用，从 .triangle--down 中删除 overflow: hidden; 并将其更改为 overflow: inherit;

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

希望对你有帮助