CSS：具有倾斜边框的自定义形状

Question

我有一个用html和css创建的自定义花式页脚。请在此处查看：https://jsfiddle.net/fb6qdvrw/

要创建三角形，我使用:before和:after，如下所示：

#footer .layer-4.bg-secondary:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 100%;
  border-top: 120px solid transparent;
  border-left: 120px solid #FFFFFF;
  width: 0;
}

#footer .layer-4.bg-secondary:after {
  content: '';
  position: absolute;
  top: 10px;
  right: 0;
  left: 100%;
  border-top: 120px solid transparent;
  border-left: 120px solid #ffcf87;
  width: 0;
}

我想解决的问题是白线/边框厚度。我需要它对于对角线和水平线具有相同的厚度。在我的情况下，这可能吗？我看到我仅限于三角形和矩形，但我认为必须有一个解决方案。目前，我的花哨的页脚因此而难看。

Answer 1

基于CSS的方法：

下面是一些基于CSS的纯方法来创建这个形状：

1 - 倾斜转型：

您可以使用CSS3 skew()转换来创建此形状。

必填HTML：

我们需要的只是页脚内的2个元素，即：

<div class="footer">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

然后，我们将为每个子元素使用::before和::after伪元素来绘制相应元素上的偏斜叠加层：

输出：

工作示例：

body {margin: 0;}

.footer {
  position: relative;
  padding-top: 100px;
  overflow: hidden;
}

.top,
.bottom {
  position: relative;
  height: 50px;
}

.bottom {
  margin-top: 10px;
}

.top::before {
  transform-origin: left top;
  transform: skew(45deg);
  position: absolute;
  background: green;
  height: 100px;
  width: 145px;
  content: '';
  top: 100%;
  right: 0;
}

.bottom:before {
  transform-origin: right bottom;
  transform: skew(45deg);
  position: absolute;
  background: blue;
  height: 150px;
  bottom: 100%;
  width: 95px;
  content: '';
  left: 0;
}

.top::after,
.bottom::after {
  transform-origin: left bottom;
  transform: skew(45deg);
  position: absolute;
  background: green;
  right: -100px;
  left: 100px;
  content: '';
  bottom: 0;
  top: 0;
}

.bottom:after {
  transform-origin: right bottom;
  background: blue;
  right: 100px;
  left: -100px;
}

<div class="footer">
  <div class="top">
  
  </div>
  <div class="bottom">
    
  </div>
</div>

2- Linear-Gradient：

在这种方法中，我们将使用CSS linear-gradient()函数在元素上绘制此形状作为背景。因为我们可以在元素上应用多个背景图像，所以我们将这个形状分成小部分，并在具有精确控制的大小和位置的元素上绘制它们。

我们可以将这个形状分成4个部分，并绘制出各自具有特定尺寸和位置的形状。

以下是创建此形状的分步过程：

必填HTML：

我们只需要一个块级元素（div）可能有一些类，即：

<div class="shape"></div>

第1步：

首先，让我们尝试在元素的底部创建长歪斜的形状。

必要的CSS：

div {
  background-image: linear-gradient(-135deg, transparent 50px, blue 50px);
  background-repeat: no-repeat;
  background-size: 100% 50px;
  background-position: right 75px bottom;
}

我们将得到以下输出：

第2步：

现在我们将在左下方绘制一个大三角形：

必要的CSS：

div {
  background-image: linear-gradient(-135deg, transparent 50px, blue 50px),
                    linear-gradient(-135deg, transparent 135px, blue 135px);
  background-size: 100% 50px, 180px 200px;
  background-position: right 75px bottom, left bottom;
}

这将创建以下输出：

第3步：

现在我们将使用以下CSS绘制上三角形条：

div {
  background-image: linear-gradient(-135deg, transparent 50px, blue 50px),
                    linear-gradient(-135deg, transparent 135px, blue 135px),
                    linear-gradient(45deg, transparent 50px, green 50px);

  background-size: 100% 50px, 180px 200px, 100% 50px;
  background-position: right 75px bottom, left bottom, left 75px bottom 60px;
}

我们将得到以下输出：

第4步：

最后，我们将绘制正确的底部三角形图像：

div {
  background-image: linear-gradient(-135deg, transparent 50px, blue 50px),
                    linear-gradient(-135deg, transparent 135px, blue 135px),
                    linear-gradient(45deg, transparent 50px, green 50px),
                    linear-gradient(45deg, transparent 50px, green 50px);


  background-size: 100% 50px, 180px 200px, 100% 50px, 150px 100px;
  background-position: right 75px bottom, left bottom, left 75px bottom 60px, right bottom;
}

这将创建以下形状：

工作示例：

div {
  background-image: linear-gradient(-135deg, transparent 50px, blue 50px),
                    linear-gradient(-135deg, transparent 135px, blue 135px),
                    linear-gradient(45deg, transparent 50px, green 50px),
                    linear-gradient(45deg, transparent 50px, green 50px);
  background-repeat: no-repeat;
  background-size: 100% 50px, 180px 200px, 100% 50px, 150px 100px;
  background-position: right 75px bottom, left bottom, left 75px bottom 60px, right bottom;
  height: 200px;
}

<div class="shape"></div>

基于SVG的方法：

多边形形状：

我们也可以使用SVG的polygon元素来绘制这个形状：

polygon元素通过连接直线段绘制闭合的形状。该元素采用单个points参数，其中包含一个点列表

必要代码：

<svg width="400" height="140" viewBox="0 0 400 140">
  <polygon points="0,0 80,100 300,100 330,140 0,140" />
  <polygon points="53,50 85,90 305,90 343,140 400,140 400,50" />
</svg>

工作示例：

body {margin: 0;}

svg {
  height: auto;
  width: 100%;
}

<svg width="400" height="140" viewBox="0 0 400 140">
  <polygon points="0,0 80,100 300,100 330,140 0,140" fill="blue" />
  <polygon points="53,50 85,90 305,90 343,140 400,140 400,50" fill="green" />
</svg>

有用的资源：

• CSS3转换：Specs，MDN
• 线性渐变：Specs，MDN
• SVG：Specs，MDN