创建三角形

Question

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

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

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

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）。您选择左三角形作为左侧列的背景图像，将右侧三角形选择为右侧三角形作为bg图像。中间的是你的内容。

别忘了在SVG中使用preserveAspectRatio（https://developer.mozilla.org/de/docs/SVG/Attribute/preserveAspectRatio）。