erweitern div nach rechts css

Question

.icon1 { 
 
    float: left; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 100px solid red; 
 
    border-right: 100px solid transparent; 
 
} 
 
    
 
.text1 { 
 
    float: right; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 100px solid transparent; 
 
    border-right: 100px solid red; 
 
    right: 50px solid red; 
 
}

<div class="content"> 
 
    <div class= "icon1"></div> 
 
    <div class= "text1"></div> 
 
</div>

ich die text1 div nach rechts erweitern machen wollen, glaube ich, ein Screenshot helfen: Könnt ihr mir helfen? Ich möchte, dass das linke Dreieck ein Rechteck ohne die linke untere Ecke ist.

Answer 1

nicht sicher, ob dies für Sie arbeitet, gehackt gerade diese zusammen ganz schnell:

.content { 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    height: 120px; 
 
    padding: 10px; 
 
    background: #fff; 
 
} 
 

 
.icon1 { 
 
    float: left; 
 
} 
 

 
.icon1::before { 
 
    content: " "; 
 
    float: left; 
 
    height: 0; 
 
    width: 0; 
 
    border-top: 100px solid transparent; 
 
    border-left: 100px solid #f00; 
 
} 
 

 
.icon1::after { 
 
    content: " "; 
 
    float: left; 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: -70px; 
 
    border-right: 100px solid #f00; 
 
    border-bottom: 100px solid transparent; 
 
} 
 

 
.text1 { 
 
    float: left; 
 
    height: 100%; 
 
    padding: 0 1em; 
 
    line-height: 80px; 
 
    color: #fff; 
 
    background: #f00; 
 
    font-family: sans-serif; 
 
    font-weight: bold; 
 
}

<div class="content"> 
 
    <div class= "icon1"></div> 
 
    <div class= "text1"><p>I'm some text within a fancy box.</p></div> 
 
</div>

Bazinga.

EDIT: Komplett überarbeitet, basierend auf der neuesten Bildreferenz von OP. Ich habe es in keinem anderen Browser versucht, ich bin mir nicht sicher, ob das gut funktioniert. Sieht auf FF gut aus.