Html 如何使用css进行此设计？

我想做这个设计，但没有成功？我无法克服这个问题，任何帮助都是值得的

我附上的设计，我想要的形象

这是我试过的代码

.auth\u容器{
最小高度：70%；
宽度：50%；
保证金：2rem；
边界半径：.4rem；
背景色：#fff；
盒子阴影：0.125rem 0.25rem rgba（0,0,0,075）；
-webkit过渡：全部。5s轻松；
过渡：所有。5s轻松；
}
.auth\uuu nav{
列表样式：无；
左边距：10%；
填充：0；
背景：e8e6e6；
宽度：50%；
}
.auth__导航标题{
宽度：50%；
背景色：#e42a70；
位置：相对位置；
排名：0；
左：-1em；
身高：4rem；
颜色：#fff；
}
.auth__导航标题：之前{
边框宽度：0 1rem 1rem 0；
边框颜色：透明蓝色；
左：0；
底部：-1rem；
}

---

注册
登录

您可以使用css三角形

\35;三角形

实现，该三角形具有

位置：绝对
：


.auth\u容器{
最小高度：70%；
宽度：50%；
保证金：2rem；
边界半径：.4rem；
背景色：#fff；
盒子阴影：0.125rem 0.25rem rgba（0,0,0,075）；
-webkit过渡：全部。5s轻松；
过渡：所有。5s轻松；
}
.auth\uuu nav{
列表样式：无；
左边距：10%；
填充：0；
背景：e8e6e6；
宽度：50%；
}
.auth__导航标题{
宽度：50%；
背景色：#e42a70；
位置：相对位置；
排名：0；
左：-1em；
身高：4rem；
颜色：#fff；
}
.auth__导航标题：之前{
边框宽度：0 1rem 1rem 0；
边框颜色：透明蓝色；
左：0；
底部：-1rem；
}  
#三角{
位置：绝对位置；
最高：100%；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 1rem 1rem 0；
边框颜色：透明#e42a70透明；
}

注册
登录
使用此html

<div class="ph">
  <div class="ph-left">
    <div></div><div></div>
  </div>
  <div class="ph-right">
    <img src="img.jpg" alt="">
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
  </div>
</div>

你用横幅得到这个图像

@Ronak07不是问题。请
upvote
所有有用的答案谢谢；）已经做了@johannschopin:）
.ph {
  display: flex;
}
.ph * {
  box-sizing: border-box;
}
.ph-left {
  position: relative;
  flex: 0 0 35px;
}
.ph-left div:first-child {
  margin-top: 150px;
  width: 35px;
  height: 80px;
  background-color: red;
}
.ph-left div:last-child {
  width: 35px;
  height: 25px;
  margin-top: -1px;
  border-right: 35px solid red;
  border-bottom: 25px solid transparent;
}
.ph-right {
  position: relative;
  flex: 0 0 360px;
  width: 360px;
}
.ph-right img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}
.ph-right h2 {
  position: absolute;
  top: 150px;
  left: 0;
  width: 80%;
  display: block;
  margin: 0;
  padding: 15px;
  background-color: red;
  color: white;
  font-size: 16px;
  line-height: 1.2;
}