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)可能有一些类,即:

<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转换:规范,MDN
• 线性梯度:规格,MDN
• SVG:规格,MDN