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

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

这个问题是我自己努力解决的，它是每个三角形的底部阴影，在自适应版本中，它似乎在底部阴影线，我无法隐藏或删除它。

非常感谢您的提前帮助！

Answer 1

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

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

我希望这对您有帮助

试图将底部阴影设置为三角形透明

1 个答案: