盒子侧面的 CSS“箭头”答案

【问题标题】：CSS "Arrow" On Side of Box盒子侧面的 CSS“箭头”
【发布时间】：2022-02-05 06:13:19
【问题描述】：

基本上我正在尝试做与this post 基本相同的事情，但是，我使用的是背景图像而不是平面背景颜色。

我之前尝试过“边框方法”，但结果并不正确。在我的小提琴中，我尝试使用一种在边缘创建旋转正方形（菱形）的技术。在这两种情况下，背景都因为所述背景图片而关闭：

这是我正在使用的代码：

body {
  background-color: #1e1e1e;
}

.journey-boxes {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  margin-top: 30px;
  margin-bottom: 30px;
}

.journey-box {
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 7px;
  margin-left: 12px;
  margin-right: 12px;
}

.journey-box-container {
  display: flex;
  flex-direction: column;
  height: 400px;
}

.journey-box-header {
  display: flex;
  align-items: center;
  position: relative;
  background-image: url("https://via.placeholder.com/20");
  height: 100px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  padding-left: 30px;
  padding-right: 30px;
}

.journey-box-header:before {
  content: " ";
  position: absolute;
  background: inherit;
  width: 30px;
  height: 30px;
  top: 25px;
  right: -15px;
  transform: rotate(45deg);
}

.journey-box-header h4 {
  letter-spacing: 0;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 40px;
}

.journey-box-body {
  padding-top: 20px;
  padding-right: 30px;
  padding-left: 30px;
  background-color: #fff;
}

<div class="journey-boxes">
  <!-- Week One -->
  <div class="journey-box">
    <div class="journey-box-container">
      <div class="journey-box-header">
        <h4>Week One</h4>
      </div>
      <div class="journey-box-body">
        <p>Blah Blah Blah</p>
      </div>
    </div>
  </div>
  <!-- Week Two -->
  <div class="journey-box">
    <div class="journey-box-container">
      <div class="journey-box-header">
        <h4>Week Two</h4>
      </div>
      <div class="journey-box-body">
        <p>Blah Blah Blah</p>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

鉴于您问题中的代码，我没有看到像您的屏幕截图中那样推出边框的问题。请上传您用作问题背景的图片，然后将其插入到 background-image 属性的 URL 值中，并查看任何其他缺失的属性以创建 minimal reproducible example。
真的很奇怪，你的问题不包含任何问题。它工作得很好。问题是什么？
@MisterJojo 他们的问题陈述是“在这两种情况下，由于所述背景图像，背景都关闭了：”从图像中可以看出，彩色之间有空间背景和不应该存在的 div 容器的右边缘。但是，堆栈片段中不会出现此问题。

标签： html css flexbox

【解决方案1】：

您可以向元素添加第二个反向旋转，以使背景再次对齐。这是你要找的吗？

body {
  background-color: #1e1e1e;
}

.journey-boxes {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  margin-top: 30px;
  margin-bottom: 30px;
}

.journey-box {
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 7px;
  margin-left: 12px;
  margin-right: 12px;
}

.journey-box-container {
  display: flex;
  flex-direction: column;
  height: 400px;
}

.journey-box-header {
  display: flex;
  align-items: center;
  position: relative;
  background-image: url("https://via.placeholder.com/20");
  height: 100px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  padding-left: 30px;
  padding-right: 30px;
}

.arrow{
  position: absolute;
  width: 30px;
  height: 30px;
  top: 25px;
  right: -15px;
  transform: rotate(45deg);
  overflow: hidden;
  background: inherit;
}

.arrow::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg) translateY(-5px);
  background: inherit;
}

.journey-box-header h4 {
  letter-spacing: 0;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 40px;
}

.journey-box-body {
  padding-top: 20px;
  padding-right: 30px;
  padding-left: 30px;
  background-color: #fff;
}

<div class="journey-boxes">
  <!-- Week One -->
  <div class="journey-box">
    <div class="journey-box-container">
      <div class="journey-box-header">
        <div class="arrow"></div>
        <h4>Week One</h4>
      </div>
      <div class="journey-box-body">
        <p>Blah Blah Blah</p>
      </div>
    </div>
  </div>
  <!-- Week Two -->
  <div class="journey-box">
    <div class="journey-box-container">
      <div class="journey-box-header">
        <div class="arrow"></div>
        <h4>Week Two</h4>
      </div>
      <div class="journey-box-body">
        <p>Blah Blah Blah</p>
      </div>
    </div>
  </div>
</div>

【讨论】：