纯CSS中的偷工减料[重复]

Question

有没有人有什么技巧可以完成偷工减料：

只使用 CSS？ （他们使用图像）

我曾想过在一个盒子的顶部放置四个绝对定位的 CSS 三角形，带有背景色，但实际上你只能放置两个 CSS 三角形（:before, :after）而不用两个包装器包装它，它会开始添加边框是混乱的。

我认为答案是否定的，但你永远不知道 :)

编辑：

澄清一下，我说的是上图中的“切角”，而不是使用边框半径实现的圆角。

Answer 1

好的，这是我的解决方案。我确信我可以进一步简化 css，但总体思路就在这里。

这是我的小提琴..

http://jsfiddle.net/uaf7sdor/1/

正如您在我的示例中看到的，您可以将任何背景图像或颜色设置为主体，这不会干扰角落

这是我的 HTML

<div class="randomBG">


<div class="myBox">
    <div class="corner" loc="tl">
        <div class="tl"></div>
    </div>
    <div class="corner" loc="tr">
        <div class="tr"></div>
    </div>
    <div class="corner" loc="bl">
        <div class="bl"></div>
    </div>
    <div class="corner" loc="br">
        <div class="br"></div>
    </div>
    <div class="myBoxContent">
        <div class="inner">
            Hello world  dwq dwq dwqwdjb oidbwqoid bwqoi<br />
            bouiwq bdiw<br />
            <br />
            <br />
            YO
        </div>
    </div>
</div>

</div>

这是我的 CSS

.randomBG {
    background: url(http://gdj.gdj.netdna-cdn.com/wp-content/uploads/2011/02/background-pattern-design-11.jpg);
    padding: 50px;
}
.corner {
    width: 25px;
    height: 25px;
    overflow: hidden;
    position: absolute;
}
.corner div[class] {
    background-color: #AAA;
    display: inline-block;
    width: 50px;
    height: 50px;
    position: absolute;
     border: #444 solid 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;

    /* Firefox */
    -moz-transform:rotate(45deg);
    /* Safari and Chrome */
    -webkit-transform:rotate(45deg);
    /* Opera */
    -o-transform:rotate(45deg);
    /* IE9 */
    -ms-transform:rotate(45deg);
    /* IE6,IE7 */
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; 

}
.corner .tl {
    top: 10px;
    left: 0px;
}
.corner .tr {
    top: 10px;
    left: -25px;
}
.corner .bl {
    top: -35px;
    left: 0px;
}
.corner .br {
    top: -35px;
    left: -25px;
}

.myBox {
    padding: 25px;
    display: inline-block;
    position: relative;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;
}
.myBox .myBoxContent {
    background-color: #AAA;
    display: inline-block;
    width: inherit;
    height: inherit;
    position: relative;
}
.myBox [loc="tl"] {
    top: 0px;
    left: 0px;
}
.myBox [loc="tr"] {
    top: 0px;
    right: 0px;
}
.myBox [loc="bl"] {
    bottom: 0px;
    left: 0px;
}
.myBox [loc="br"] {
    bottom: 0px;
    right: 0px;
}
.myBox .myBoxContent::before {
    content: "";
    display: inline-block;
    background-color: #AAA;
    width: 100%;
    height: 25px;
    position: absolute;
    top: -25px;
    left: 0px;
    border-top: #444 solid 1px;
}
.myBox .myBoxContent::after {
    content: "";
    display: inline-block;
    background-color: #AAA;
    width: 100%;
    height: 25px;
    position: absolute;
    bottom: -25px;
    left: 0px;
    border-bottom: #444 solid 1px;
}
.myBox .myBoxContent .inner::before {
    content: "";
    display: inline-block;
    background-color: #AAA;
    width: 25px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: -25px;
    border-left: #444 solid 1px;
}
.myBox .myBoxContent .inner::after {
    content: "";
    display: inline-block;
    background-color: #AAA;
    width: 25px;
    height: 100%;
    position: absolute;
    top: 0px;
    right: -25px;
    border-right: #444 solid 1px;
}