Question

有没有人有任何技术可以实现切角：

enter image description here

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

我想过将四个绝对定位的CSS三角形（背景颜色）放在一个盒子的顶部，但你实际上只能放两个CSS三角形（：before，：after）而不将它包装在两个包装器中，它会混乱，开始添加边界。

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

编辑：

只是为了澄清我正在谈论＆＃34; cut＆＃34;如上图所示的角，而不是使用border-radius实现的圆角。

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;
}

在纯CSS中偷工减料

1 个答案: