css - 具有对 Angular 线底部边框的 Div

Question

我怎样才能制作一个有斜底和边框的div？
我知道我可以使用 clip-path，但是通过这种方式我无法制作边框(例如:https://jsfiddle.net/s976/qopxf6mj/4/)

我看到了“Creating a diagonal line/section/border with CSS”，但这与为对 Angular 线容器启用 css border 无关。

Answer 1

您可以像下面这样尝试使用倾斜变换:

.container {
  width: 300px;
  height: 200px;
  background: url(https://picsum.photos/id/1002/800/800) center/cover;
  overflow: hidden;
}

.box {
  height: 70%;
  border-bottom: 10px solid red;
  transform: skewY(-15deg);
  transform-origin: left;
  position: relative;
  overflow: hidden;
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://picsum.photos/id/12/800/800) center/cover;
  transform: skewY(15deg);
  transform-origin: left;
}

<div class="container">
  <div class="box">

  </div>
</div>

或者 clip-path 结合一些渐变，如下所示:

.container {
  width: 300px;
  height: 200px;
  background: url(https://picsum.photos/id/1002/800/800) center/cover;
}

.box {
  height: 70%;
  border-bottom: 10px solid red;
  background: 
    linear-gradient(to bottom right,transparent 49.5%,red 50%) bottom/100% 80px no-repeat,
    url(https://picsum.photos/id/12/800/800) center/cover;
  clip-path:polygon(0 0,100% 0, 100% calc(100% - 80px),0 100%)
}

<div class="container">
  <div class="box">

  </div>
</div>

您可以优化最后的代码以仅使用一个元素和一些变量

.container {
  width: 300px;
  height: 200px;
  background: url(https://picsum.photos/id/1002/800/800) center/cover;
  --angle:80px;     /* Control the angle*/
  --thickness:10px; /* Control the thickness of the line */
}

.container:before{
  content:"";
  display:block;
  height: 70%;
  border-bottom: var(--thickness) solid red;
  background: 
    linear-gradient(to bottom right,transparent 49.2%,red 50%) bottom/100% var(--angle) no-repeat,
    url(https://picsum.photos/id/12/800/800) center/cover;
  clip-path:polygon(0 0,100% 0, 100% calc(100% - var(--angle)),0 100%)
}

<div class="container">

</div>

<div class="container" style="--angle:40px;--thickness:5px">

</div>