如何用CSS实现左侧内翻式退角效果

我需要实现这样的效果：橙色列在紫色行的上方，且左侧带有内翻式退角。因为可能用错了术语，搜不到相关解决方案，希望能得到实现指导。我当前的代码和预期效果差距很大，代码如下：

当前代码 #

HTML #

<div class="page foldtl">
  <h2>Headline</h2>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

CSS #

body {
  background: #272822;
}

.page {
  background: #fff;
  width: 250px;
  height: 330px;
  margin: 50px;
  /* Optional Gradient */
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
  /* IE10+ */
  background: linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
  /* IE6-9 */
}

.page h2 {
  padding: 85px 0 0 20px;
  font: 400 35px/1.5 'Lilita One', Helvetica, sans-serif;
}

.page p {
  padding: 10px 20px;
  font: 12px/1.5 Helvetica, sans-serif;
  color: #4b4b4b;
}

.foldtl {
  position: relative;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
}

.foldtl:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0px;
  height: 0px;
  border-bottom: 70px solid #eee;
  border-left: 70px solid transparent;
  -webkit-box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.3);
}

.foldtl:after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0px;
  height: 0px;
  border-top: 69px solid #272822;
  border-right: 69px solid transparent;
}

下面是符合需求的代码，核心是利用CSS伪元素实现左侧内翻退角，同时分层设置橙色栏和紫色栏的布局：

完整代码 #

HTML #

<div class="container">
  <div class="orange-bar"></div>
  <div class="purple-row"></div>
</div>

CSS #

body {
  background: #272822;
  padding: 50px;
}

.container {
  width: 300px;
  position: relative;
}

/* 橙色栏 - 带左侧内翻退角 */
.orange-bar {
  height: 60px;
  background: #ff7a2e;
  position: relative;
  margin-bottom: 20px;
}

.orange-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  /* 构建内翻退角：左侧透明，下方为橙色栏同色，右侧为背景色形成内凹效果 */
  border-top: 25px solid transparent;
  border-right: 25px solid #ff7a2e;
  border-bottom: 25px solid #ff7a2e;
  /* 阴影增强退角的立体效果 */
  box-shadow: -2px 2px 3px rgba(0,0,0,0.1);
}

/* 紫色行 */
.purple-row {
  height: 80px;
  background: #8a2be2;
}

关键实现要点 #

• 用::before伪元素给橙色栏构建左侧内翻退角，通过边框的透明色和实色组合实现内凹效果
• 外层容器设相对定位，方便内部元素的位置控制
• 调整边框尺寸可以改变退角的大小，阴影可以增强立体感

内容的提问来源于stack exchange，提问作者hnnnng