css - 创建三角形

Question

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

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

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

Answer 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+ 和所有其他现代）浏览器支持实现了请求的形状。然而，当向上或向下缩放高度时，最终三角形不再是三角形并且第四条边变得可见。你有几个选择：

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

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

Answer 2

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

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

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

Answer 3

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

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