尝试在三角形中设置底部阴影透明

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

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

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

我希望这有帮助