html - CSS - 使用绝对位置设置子宽度大于父宽度

Question

我正在设计一个列表项，一切正常，但面临一个问题，即通过定位将子项的宽度设置为大于父项的宽度absolute。这是我做过的代码

.container {
  margin: 5rem;
}

.listing {
  width: 50px;
  height: 50px;
  background-color: #333C83;
  clip-path: polygon(25% 5%, 100% 0%, 75% 95%, 0% 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #0A0D1E;
  display: flex;
  justify-content: center;
  align-items: center;
}
.secondaryCircle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #FABC42;
  position: relative;
}

.line {
  height: 5px;
  background-color: #FABC42;
  width: 40px;
  position: absolute;
  top: 4.5px;
  left: 14px;
}

<div class="container">
  <div class="listing">
    <div class="circle">
      <div class="secondaryCircle">
        <div class="line"></div>
      </div>
    </div>
  </div>
</div>

如您所见，线不可见，宽度为40px. 我怎样才能解决这个问题 ？

这是我想要的输出

标签： htmlcss

Answer 1

.listing这是因为类中的这个 css

    .listing { clip-path: polygon(25% 5%, 100% 0%, 75% 95%, 0% 100%); }

它往往会裁剪掉盒子的边缘。尝试使用transform:skew来实现您想要的特定目标..

我提供了一个例子。随意调整它。

.container {
  margin: 5rem;
}

.listing {
  width: 40px;
  height: 50px;
  background-color: #333C83;
  transform: skewY(-12deg);
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #0A0D1E;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: skewY(12deg);
}
.secondaryCircle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #FABC42;
  position: relative;
}

.line {
  height: 5px;
  background-color: #FABC42;
  width: 40px;
  position: absolute;
  top: 4.5px;
  left: 14px;
}

<div class="container">
  <div class="listing">
    <div class="circle">
      <div class="secondaryCircle">
        <div class="line"></div>
      </div>
    </div>
  </div>
</div>