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-线性渐变：

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

我们可以将这个形状分成 4 个部分，并分别绘制它们，每个部分都有特定的大小和位置。

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

必填HTML:

我们只需要一个块级元素 (div) 可能有一些 class 即：

<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

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

CSS: Custom shape having angled borders

html

css

css-shapes

CSS 基于方法：

基于 SVG 的方法：