css - 创建三 Angular 形

Question

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

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

我该如何解决这个问题，我提出了两个三 Angular 形(在草图中标记为红色)。

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+ 和所有其他现代)浏览器支持实现了请求的形状。然而，当按比例放大或缩小高度时，最终三 Angular 形不再是三 Angular 形并且第四条边变得可见。您有多种选择:

1. 找到适用于实际数量内容的维度并为其编写代码。
2. 使用 JavaScript 动态改变倾斜量。
3. 将边缘形状的背景与主要形状混合。
4. 忽略它(根据布局，它不一定看起来很糟糕)。

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