将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>

我想让text1 div扩展到右边，我认为截图会有所帮助： 你们能帮助我吗？我希望左三角形是一个没有左下角的矩形。

Answer 1

不确定这是否适合你，只是快速地将它们整合在一起：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Bazinga。

编辑：根据OP的最新图片参考完全重写了这一点。没有在任何其他浏览器中尝试过，不确定这是否会保持良好状态。虽然在FF看起来对我很好。