CSS 只能跨浏览器剪角吗？

Question

有人有现代 CSS 方法来做这样的事情吗？我已经找了很多年了。也许我使用了错误的搜索词？

http://fu2k.org/alex/css/equalheight/divs/clipped

更新：

感谢大家的回复和回复。评论。不幸的是，我的 div 背景是有图案的，并且有一个细实心边框，所以这似乎排除了很多建议。我仍在探索这些想法。也许 javascript 方法是可能的？

Answer 1

您可以使用纯 CSS 实现这一点 - 跨平台，工作到 IE7（我还没有使用 IE6 测试过这一点，但我认为它应该仍然有效）。

<style type="text/css">
<!--
div.big {
    position: relative;
    width: 600px;
    height: 200px;
    background:#FFF url(images/pattern.png)
    border: solid 1px black;
}

div.top-left-b {
    width: 0;
    height: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    border-top: solid 40px black;
    border-right: solid 40px transparent;
    z-index: 1;
}

div.top-left-w {
    width: 0;
    height: 0;
    position: absolute;
    top: -1px;
    left: -1px;
    border-top: solid 40px white;
    border-right: solid 40px transparent;
    z-index: 2;
}

div.top-right-b {
    width: 0;
    height: 0;
    position: absolute;
    top: 0px;
    right: 0px;
    border-top: solid 40px black;
    border-left: solid 40px transparent;
    z-index: 1;
}

div.top-right-w {
    width: 0;
    height: 0;
    position: absolute;
    top: -1px;
    right: -1px;
    border-top: solid 40px white;
    border-left: solid 40px transparent;
    z-index: 2;
}

div.bottom-left-b {
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0px;
    left: 0px;
    border-bottom: solid 40px black;
    border-right: solid 40px transparent;
    z-index: 1;
}

div.bottom-left-w {
    width: 0;
    height: 0;
    position: absolute;
    bottom: -1px;
    left: -1px;
    border-bottom: solid 40px white;
    border-right: solid 40px transparent;
    z-index: 2;
}

div.bottom-right-b {
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0px;
    right: 0px;
    border-bottom: solid 40px black;
    border-left: solid 40px transparent;
    z-index: 1;
}

div.bottom-right-w {
    width: 0;
    height: 0;
    position: absolute;
    bottom: -1px;
    right: -1px;
    border-bottom: solid 40px white;
    border-left: solid 40px transparent;
    z-index: 2;
}
-->
</style>

<div class="big">
    <div class="top-left-b"><!-- --></div>
    <div class="top-left-w"><!-- --></div>
    <div class="top-right-b"><!-- --></div>
    <div class="top-right-w"><!-- --></div>
    <div class="bottom-left-b"><!-- --></div>
    <div class="bottom-left-w"><!-- --></div>
    <div class="bottom-right-b"><!-- --></div>
    <div class="bottom-right-w"><!-- --></div>
</div>

这将产生以下效果：

Answer 2

对于圆角，您可以使用 border-radius（带或不带供应商前缀）。

如果您确实想要与问题中的图像相同的外观，您可以使用两个容器，并应用 CSS-转换（带或不带供应商前缀）+ overflow:hidden 以获得所需的外观。

对于不支持这些方法的旧浏览器，必须使用透明背景图像来进行回退。

演示 + 逻辑的进一步解释位于： http://jsfiddle.net/7upkc/1/

HTML ：

<div class="outer-clipped-box">
    <div class="inner-clipped-box">
        <div class="content-clipped-box">
            Content here.
        </div>
    </div>
</div>

CSS（跨浏览器支持的供应商特定前缀，在这种情况下忽略 Opera 和 IE）：

.outer-clipped-box {
    height: 200px;
    width: 200px;
    overflow: hidden;
}
.inner-clipped-box {
    height: 250px;
    width: 250px;
    background: #ddf;

    -moz-transform-origin: 140px 84px;
    -moz-transform: rotate(45deg);
    -webkit-transform-origin: 140px 84px;
    -webkit-transform: rotate(45deg);
    transform-origin: 140px 84px;
    transform: rotate(45deg);
}

/* Undo rotation, to get the content in the right position*/
.content-clipped-box {
    height: 150px;
    width: 150px;

    -moz-transform-origin: center center;
    -moz-transform: rotate(-45deg) translate(0,70px);
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-45deg) translate(0,70px);
    transform-origin: center center;
    transform: rotate(-45deg) translate(0,70px);
}

Answer 3

没有现代的 CSS 可以做到这一点，只能用于圆角。但您可以使用老式边框绘制剪裁的边缘。看这个例子 http://ago.tanfa.co.uk/css /borders/stacked-cubes.html

Answer 4

这是可以做到的。谷歌搜索“CSS对角线”或三角形，但我记得读过的唯一例子使用了技巧。 这是一个三角形的示例，您可以使用它插入角和设置不透明度或类似的值。但是这可能有更好的信息。

编辑：比这一切更好的是我应该首先提到的： Stu Nichol 的网站。