Question

是否有现代的CSS方法做类似的事情? 我正在寻找年龄。 Maybe 使用错误的搜索术语吗?

最新资料:

感谢所有答复和评论。不幸的是,我四分五裂的背景是平常的,而且边界很薄弱,似乎排除了许多建议。我仍在探讨这些想法。也许用 j法是一种可能性?

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 。 https://developer.mozilla.org/en/CSS/overflow” rel=“nofollow noreferer”>>>overuro:hidden 达到预期目标。

必须利用透明的背景形象,对不支持这些方法的年长浏览器进行反馈。

Demo + further explanation of logic at: http://jsfiddle.net/7upkc/1/

传真:

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

CSS(针对交叉浏览器支持、忽视操作和在此情况下采用电子操作):

.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

没有任何现代奇迹,只有四舍五入。但是,你可以带走老学校边界的边缘。参看rel=“nofollow”http://ago.tanfa.co.uk/cs/ Borders/stacked-cubes.html。

Answer 4

It can be done. Google for "CSS diagonal corner" or triangle but the only example I recall reading used tricks. Here s an example of a triangle that you might use to insert into a corner and set opacity or some such. But this might have better info on that.

EDIT: 甚至比我第一次提到的情况要好:

Demo + further explanation of logic at: http://jsfiddle.net/7upkc/1/

友情链接