创建三角形答案

【问题标题】：Creating triangles创建三角形
【发布时间】：2017-10-11 14:47:31
【问题描述】：

我正在创建一个 wordpress 主题，内容的两边都应该有对角线边框。我可以用图片解决这个问题，但这是一种丑陋的方式，而且每一页的内容长度都不一样。

在这种情况下，我认为左右两侧的两个三角形是正确的解决方案。我用this tutorial尝试过，但问题是我必须使用固定宽度的边框，三角形应该有内容的高度，动态调整。

我该如何解决这个问题，我想出了两个三角形（在草图中标记为红色）。

【问题讨论】：

+1 提供图片解释您的问题

标签： css

【解决方案1】：

您可以使用 CSS 倾斜变换来实现这一点（尽管有些不精确）：

演示： http://jsfiddle.net/cUWm2/2/

<div class="shape">
    A variable amount of content.
</div>

.shape {
    position: relative;
}
.shape:before {
    content:"";
    -moz-transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
    transform: skewX(10deg);
    width: 140%;
    left: -20%;
    height: 100%;
    background-color: #555;
    position: absolute;
    top: 0;
    z-index: -1;
}

这以最少的标记和体面的（IE9+ 和所有其他现代）浏览器支持实现了请求的形状。然而，当向上或向下缩放高度时，最终三角形不再是三角形并且第四条边变得可见。您有多种选择：

找到适用于实际内容数量的维度和代码。
使用 JavaScript 动态更改倾斜量。
将边缘形状的背景与主要形状混合。
忽略它（取决于布局，它不一定看起来很糟糕）。

说了这么多（在使用了各种 CSS 选项之后）我可能会首先考虑以图像为中心的解决方案。您可以使用:before 和:after 伪元素创建容器，这些容器可以随着您的主要内容垂直调整大小，同时保持相同的宽度。然后，您可以使用背景图片覆盖所需区域，或将 100% x 100% 的图片放入容器中。

【讨论】：

+1 是一个有趣的解决方案，虽然我不禁觉得在 CSS 中使用“传统”方法创建三角形会更合适，因为它得到了更好的支持并且更简洁
是的，我在过去的半个小时里一直在玩它……它很酷，但不是很实用（尤其是动态高度）。如果我能保持清醒那么久，我可能会发布一个更好的解决方案:)
我刚刚尝试使用边框方法制作动态大小的三角形，但惨遭失败。所有这些解决方案都依赖于固定值，更糟糕的是，不支持百分比
我尝试了同样的事情（以及其他几条路线）。我没有找到任何可以精确覆盖动态高度的东西。 background-size: cover 可能是最简单的路线。

【解决方案2】：

我也同意使用 SVG。我发现它们更容易操作，因为它们是可扩展的并且在浏览器之间交叉兼容，因为它们是图像。这是我发布的类似问题的答案，应该可以帮助您入门：Make CSS3 triangle with linear gradient

从那里，很容易设置图像高度以匹配内容。这是一个 jQuery 示例：

$(document).ready(function() {
     $(".triangle").height($(".content").height());
});

【讨论】：

【解决方案3】：

我会通过使用 SVG（可缩放矢量图形）来解决这个问题。您创建两个三角形 SVG，然后创建一个 3 列布局，其中所有列的高度相同（例如，使用 display: table-cell）。您选择左三角形作为左列的背景图像，右三角形作为右列的背景图像。中间一个是你的内容。

不要忘记在 SVG 中使用 preserveAspectRatio(https://developer.mozilla.org/de/docs/SVG/Attribute/preserveAspectRatio)。

【讨论】：