展开DIV向右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>

我要让文本1格向右展开，我觉得截图将帮助： 你们能帮助我吗？我想要左三角形是没有左下角的矩形。

Answer 1

不知道这是否适用于你，就砍死了一起真正快速：

.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。

编辑：根据OP的最新图片参考完全重做。没有在任何其他浏览器尝试它，不知道这是否会保持良好。虽然FF在我看来很好。