具有对角线底部边框的 Div答案

【问题标题】：Div with diagonal bottom border具有对角线底部边框的 Div
【发布时间】：2020-02-07 17:52:23
【问题描述】：

如何制作一个底部对角线和边框的 div？
我知道我可以使用clip-path，但是这样我不能做边框（例如：https://jsfiddle.net/s976/qopxf6mj/4/）

我看到了“Creating a diagonal line/section/border with CSS”，但这不是为对角容器启用 css border。

【问题讨论】：

向我们展示您的尝试，即使是带有剪辑路径但您缺少边框的尝试
Creating a diagonal line/section/border with CSS的可能重复
只需将两个部分用一个间隙分开，并将容器的背景用作“边框”。
@TemaniAfif jsfiddle.net/s976/qopxf6mj/4
@cloned No. 请查看更新

标签： css

【解决方案1】：

您可以使用 clip-path 属性并控制其大小。

试试这个：-

.right {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 23%, 0 83%);
  clip-path: polygon(0 0, 100% 0%, 100% 23%, 0 83%);
}

.left {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-clip-path: polygon(0 75%, 100% 22%, 100% 100%, 0 100%);
  clip-path: polygon(0 75%, 100% 22%, 100% 100%, 0 100%);
}

border {
  position: absolute;
  left: 0;
  top: 0;
  width: 400px;
  height: 300px;
  background-color: black;
  -webkit-clip-path:polygon(0 75%, 100% 22%, 100% 28%, 0 83%);
  clip-path: polygon(0 75%, 100% 22%, 100% 28%, 0 83%);
}

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<img class="left" src="https://picsum.photos/400/300?random">
<img class="right" src="https://picsum.photos/400/300">
  <border />

</body>
</html>

【讨论】：

【解决方案2】：

您可以尝试使用如下所示的倾斜变换：

.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>

或者剪辑路径与一些渐变相结合，如下所示：

.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>

【讨论】：

【解决方案3】：

我有一个想法给你，你可以用 skewY 来做：

<div class="div1"><div class="content"></div></div>
<div class="div2"><div class="content"></div></div>

div1 {
   transform: skewY(-10deg)
}

div2 {
   transform: skewY(-10deg)
}

之后，您的内容也将倾斜 -10 度，因此您需要以相反的方式倾斜：

.content {
   transform: skewY(10deg)
}

【讨论】：