Box von Grenze geteilt

Question

Hey Leute, wie kann ich die Grenze nach innen mache die Box teilen, aber die Steigung in dem ersten sein https://jsfiddle.net/ivailo/1hx4axpt/1/

.parent2{ 
height:256px; 
width: 202px; 
border: 1px solid #E18728; 
background: linear-gradient(to bottom, rgba(185,219,105,1) 44%,rgba(209,211,172,1) 80%); 
border-radius:5px; 
} 

Answer 1

Von Ihrem Screenshot, die Spitze Ihre Box besitzt einen Rahmen, in diesem Fall erstellen Sie einen untergeordneten Bereich und wenden den Farbverlaufshintergrund darauf an. Also für den HTML-Code:

<div class="parent"> 
    <div class="child"> 
    </div> 
</div> 

Und für den CSS Teil:

.parent { 
    height:256px; 
    width: 202px; 
    border: 1px solid #E18728; 
    border-radius:5px; 
    background-color: rgba(209,211,172,1); 
} 

.child { 
    height:40px; 
    background: linear-gradient(to bottom, rgba(185,219,105,1) 44%,rgba(209,211,172,1) 80%); 
    border-radius:5px; 
    border-bottom: 1px solid white; 
} 

Answer 2

Sie ein Pseudoelement verwenden könnte, wie ::before

.parent2 { 
 
    height: 256px; 
 
    width: 202px; 
 
    border: 1px solid #E18728; 
 
    background: rgba(209, 211, 172, 1); 
 
    border-radius: 5px; 
 
} 
 
.parent2::before { 
 
    content: ''; 
 
    display: block; 
 
    height: 40px; 
 
    border-bottom: 1px solid white; 
 
    background: linear-gradient(to bottom, rgba(185, 219, 105, 1) 44%, rgba(209, 211, 172, 1) 80%); 
 
    border-radius: 5px; 
 
}

<div class="parent2"> 
 
</div>