Html 如何制作CSS功能区？

试图把它放在图像背景上。我让它半工作，但由于某种原因没有连接。将其设为两个元素试图将它们连接起来，这是错误的吗？有没有办法让它成为一个元素，或者有更好的方法

这就是现在的情况：

.wrapper{
文本对齐：居中；
}
p{
字体系列：arial；
字体大小：正常；
保证金：0；
填充：0；
文本对齐：左对齐；
}
.header\uu功能区{
填充：10px 20px；
背景色：#ad0304；
颜色：#fff；
宽度：70%；
最大宽度：350px；
文本转换：大写；
字体大小：24px；
显示：内联块；
垂直对齐：中间对齐；
}
.标题\uuuu功能区\uuuu点{
保证金：0；
宽度：0；
身高：0；
边框顶部：35px实心#ad0304；
;
右边框：35px实心透明；
边框底部：35px实心#ad0304；
;
显示：内联块；
垂直对齐：中间对齐；
左边框：10px实心#ad0304；
}
.header\uuu功能区--第二个文本{
字体大小：16px；
}

免费活动-


为3月1日标记日历！

您已将.header\uu功能区和.header\uu功能区点设置为内联块，因此内联规则适用：必须删除它们之间的所有空格。

我将在.wrapper上使用flexbox

.wrapper{
    text-align:center;
    display: flex;
    justify-content: center
}
p{
  font-family:arial;
  font-weight:normal;
  margin:0;
  padding:0;
  text-align:left;
}
.header__ribbon{
    padding: 10px 20px;
    background-color: #ad0304;
    color:#fff;
    width:70%;
    max-width: 350px;
    text-transform: uppercase;
    font-size: 24px;
    display:inline-block;
    vertical-align: middle;
}
.header__ribbon__point{
    margin:0;
    width: 0;
    height:0;
    border-top:35px solid #ad0304;;
    border-right: 35px solid transparent;
    border-bottom: 35px solid #ad0304;;
    display: inline-block;
    vertical-align: middle;
    border-left: 10px solid #ad0304;
}
.header__ribbon--secondaryText{
    font-size: 16px;
}

---

两个标题DIV之间有一个空格。您可以在包装器类中设置字体大小：0。

最好使用psuedo元素，在IMO之前使用

，在IMO之后使用




免费活动-


为3月1日标记日历！

.包装纸{
文本对齐：居中；
}
p{
字体系列：arial；
字体大小：正常；
保证金：0；
填充：0；
文本对齐：左对齐；
}
.header\uu功能区{
填充：10px 20px；
背景色：#ad0304；
颜色：#fff；
宽度：70%；
最大宽度：350px；
文本转换：大写；
字体大小：24px；
显示：内联块；
垂直对齐：中间对齐；
位置：相对位置；
}
.header\uuu功能区：在，
.header\uuu功能区：之后{
位置：绝对位置；
内容：''；
排名：0；
边框顶部：35px实心#ad0304；
边框底部：35px实心#ad0304；
}
.header\uuu功能区：之后{
右：-35px；
右边框：35px实心透明；
左边框：10px实心#ad0304；
}
.header\uuu功能区：之前{
左：-35px；
排名：0；
右边框：10px固体#ad0304；
左边框：35px实心透明；
}
我认为这些元素之间的空格是问题所在，因为您使用的是内联blockYes，请删除空白或将父元素的字体大小设置为0。看见
<div class="wrapper">
  <div class="header__ribbon">
    <p>Complimentary Event -</p>
    <p class="header__ribbon--secondaryText">
      mark your calenders for <span class="text__B">march 1<sup>st</sup>!</span>
    </p>
  </div>
</div>


.wrapper {
  text-align: center;
}

p {
  font-family: arial;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: left;
}

.header__ribbon {
  padding: 10px 20px;
  background-color: #ad0304;
  color: #fff;
  width: 70%;
  max-width: 350px;
  text-transform: uppercase;
  font-size: 24px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.header__ribbon:before,
.header__ribbon:after {
  position: absolute;
  content: '';
  top:0;
  border-top: 35px solid #ad0304;
  border-bottom: 35px solid #ad0304;
}

.header__ribbon:after {
  right: -35px;
  border-right: 35px solid transparent;
  border-left: 10px solid #ad0304;
}

.header__ribbon:before {
  left:-35px;
  top:0;
  border-right: 10px solid #ad0304;  
  border-left: 35px solid transparent;
}