Expand div to the right css [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this 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>
I want to make the text1 div expand to the right, I think a screenshot will help:
Can you guys help me? I want the left triangle to be a rectangle without the left-bottom-corner.

Answer 1

Not sure if this works for you, just hacked this together real quick:
.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: Completely reworked this based on OP's newest picture reference. Didn't try it in any other browser, not sure if this will hold up well. Looking good for me on FF though.