CSS 页眉边框底部

Question

如何在 CSS 中的 div 底部实现这种东西？

我试试

 &:before {
  content: '';
  position: absolute;
  z-index: 2;
  width: 133.93px;
  height: 93.63px;
  border-radius: 5px;
  border: 1px solid #ffffff;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  background-image: $gradeint;
  text-align: center;
  transform-origin: center;
  transform: rotateZ(45deg);
  top: -10%;
  right: 0;
}

但这不是我想要的

Answer 1

您可以使用 clip-path 属性实现类似于形状的效果。这是一个例子。

紫色区域实际上覆盖了整个容器，但其上设置的 clip-path 将其裁剪到由点 0 0, 100% 0, 35% 60%, 0 0 定义的多边形，其中 0, 0 是左上角容器的右下角。100%, 100% 是右下角。

.container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  display: flex;
}

.accent {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: purple;
  clip-path: polygon(0 0, 100% 0, 35% 60%, 0 0);
}

.image {
  width: 125px;
  height: 125px;
  background-color: lightgray;
  border-radius: 125px;
  margin: auto;
  z-index: 1;
}

<div class="container">
  <div class="accent"></div>
  <div class="image"></div>
</div>

CSS 页眉边框底部

CSS Header Border bottom

css

sass