CSS只跨浏览器修剪角落？

Question

有没有人有一个现代的CSS方法来做这样的事情？我一直在寻找年龄。也许我使用了错误的搜索字词？

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

更新：

感谢所有的回复＆amp;评论。不幸的是，我的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 - transform（有和没有供应商前缀）+ 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（特定于供应商的前缀为crossbrowser支持，在这种情况下忽略了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对角线”或三角形但我唯一的例子我记得阅读使用过的技巧。您可以使用Here's an example of a triangle插入角落并设置不透明度或其他类似值。但是this might have better info on that。

编辑：比我应该首先提到的那个更好：Stu Nichol's site.