Css für: Nach dem Dreieck

Question

Github verwendet zwei Elemente ::after die grüne Grenze um das Dreieck zu zeigen.

So:

Kann ich das gleiche Ergebnis mit nur einem ::after Selektor?
Ich frage mich, ob so etwas möglich ist.

Answer 1

können Sie versuchen, diese

div { 
 
    width:300px; 
 
    height:100px; 
 
    background:#fff; 
 
    border:1px solid green; 
 
    position:relative; 
 
    padding:20px; 
 
} 
 
    
 
div:after { 
 
    content:""; 
 
    position:absolute; 
 
    right:-11px; 
 
    top:30px; 
 
    width:20px; 
 
    height:20px; 
 
    background:#fff; 
 
    border:1px solid green; 
 
    border-left:none; 
 
    border-bottom:none; 
 
    transform:rotate(45deg); 
 
    -webkit-transform:rotate(45deg); 
 
    user-select:none; 
 
    -webkit-user-select: none; 
 
}

<div> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
 
    veniam,quis nostrud exercitation 
 
</div>

Answer 2

Sie verwendet wird, kann :after & :before Selektor für das

div { 
 
    width: 300px; 
 
    height: 200px; 
 
    background: #fff; 
 
    border: 1px solid #1db73f; 
 
    position: relative; 
 
    padding: 20px; 
 
    border-radius:5px; 
 
} 
 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    right: -20px; 
 
    top: 30px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent; 
 
    border-left: 20px solid #fff; 
 
    z-index:1; 
 
} 
 
div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    right: -21px; 
 
    top: 30px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 20px solid transparent;  
 
    border-left: 20px solid #1db73f; 
 
}

<div> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div>