Entfernen Schlagschatten nur von der linken Seite

Question

Ich habe diese Taste, die eine :after hat, um einen Pfeil zu erstellen. Ich gebe dem Button einen Box-Shadow, und gebe dem :after einen Schlagschatten, um das :after so aussehen zu lassen, als wäre es ein Teil des Buttons. Jedoch gibt es ein kleines bisschen Schatten, der über die linke Kante des :after rinnt, wodurch es von der Schaltfläche abgeschnitten erscheint. Siehe Bild:

Gibt es eine Möglichkeit des Schattens den linken Rand läuft nach unten, um loszuwerden?

Der Pfeil ist aus irgendeinem Grund aus der Taste darunter, aber es spielt keine Rolle, versuchen Sie einfach, den Schatten des Pfeils zu stoppen, der an der linken Kante entlang läuft. Hier

ist der Code:

#go-button { 
 
    position:relative; 
 
    border-radius: 6px; 
 
    height: 64px; 
 
    text-decoration: none; 
 
    width: 80%; 
 
    background-color: #00BFA5; 
 
    padding: 12px; 
 
    border: 0px solid #Fc4747; 
 
    color: white; 
 
    cursor: pointer; 
 
    font-size: 14px; 
 
    font-weight: 200; 
 
    z-index: 100; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } 
 

 
.bubble:after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 15px 0 15px 24px; 
 
    border-color: transparent #00BFA5; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 1; 
 
    margin-top: -15px; 
 
    right: -24px; 
 
    top: 50%; 
 
    -webkit-filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7)); 
 
    filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7)); 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')"; 
 
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')"; }

<button id="go-button" type="submit" class="bubble"> 
 
    GO 
 
</button>

Answer 1

Sie eigentlich gar wollen drop-shadow verwenden, da dies ein "komplexes Objekt" ist. Verschieben Sie es zum übergeordneten Element. Sie werden das, dass Drop-Schatten richtig angewandt auf die after Pseudoelement finden:

#go-button { 
 
    position:relative; 
 
    border-radius: 6px; 
 
    height: 64px; 
 
    text-decoration: none; 
 
    width: 80%; 
 
    background-color: #00BFA5; 
 
    padding: 12px; 
 
    border: 0px solid #Fc4747; 
 
    color: white; 
 
    cursor: pointer; 
 
    font-size: 14px; 
 
    font-weight: 200; 
 
    z-index: 100; 
 
    -webkit-filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7)); 
 
    filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7)); 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')"; 
 
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')"; 
 
} 
 

 
.bubble:after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 15px 0 15px 24px; 
 
    border-color: transparent #00BFA5; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 1; 
 
    margin-top: -15px; 
 
    right: -24px; 
 
    top: 50%; 
 
}

<button id="go-button" type="submit" class="bubble"> 
 
    GO 
 
</button>

Answer 2

Die box-shadow Eigenschaft ist wahrscheinlich das, was Sie hier verwenden möchten. Der Schlagschatten ist für komplexere Objekte oder SVGs gedacht.

Sie müssen nur einen besseren Box-Schatten um das :after Element anwenden.

.bubble:after { 
    box-sizing: border-box;  
    border: 1em solid #00BFA5; 
    border-color: transparent transparent #00BFA5 #00BFA5; 
    transform-origin: 0 0; 
    transform: rotate(-135deg); 
    display: block; 
    width: 0; 
    z-index: 1; 
    margin-top: -15px; 
    right: -250px; 
    top: 50%; 
    box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4); 
} 

Da Sie keine funktionierende Geige vorsah Ich werde das Zwicken der Drehung verlassen und so zu Ihnen, aber die allgemeine Idee ist, dass Sie die box-shadow nach dem Einrichten einer stylen möchten richtige Grenze & Rahmenfarbe.

JsFiddle

Answer 3

Wenn Sie nicht bereits Ihre :before für das Element verwendet haben, können Sie immer nur verstecken der Schatten mit einem anderen Pseudoelement. Eine andere Option wäre, den Schatten auszugleichen, aber das funktioniert wirklich nur gut für kleine Schatten.

Ein Beispiel für die erste:

#go-button { 
 
    position:relative; 
 
    border-radius: 6px; 
 
    height: 64px; 
 
    text-decoration: none; 
 
    width: 80%; 
 
    background-color: #00BFA5; 
 
    padding: 12px; 
 
    border: 0px solid #Fc4747; 
 
    color: white; 
 
    cursor: pointer; 
 
    font-size: 14px; 
 
    font-weight: 200; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    z-index: 1; 
 
} 
 

 
.bubble:after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 15px 0 15px 24px; 
 
    border-color: transparent #00BFA5; 
 
    display: block; 
 
    width: 0; 
 
    margin-top: -15px; 
 
    right: -24px; 
 
    top: 50%; 
 
    -webkit-filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7)); 
 
    filter: drop-shadow(0px 4px 5px rgba(130, 130, 130, 0.7)); 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')"; 
 
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=2, Color='#444')"; 
 
} 
 

 
.bubble:before { 
 
    display: block; 
 
    position: absolute; 
 
    content: ''; 
 
    right: 0; 
 
    top: 8px; 
 
    height: 48px; 
 
    width: 8px; 
 
    background: #00BFA5; 
 
    z-index: 2; 
 
}

<button id="go-button" type="submit" class="bubble"> 
 
    GO 
 
</button>