CSS框上的斜角

Question

我一直在玩CSS很短的时间,我试图有一个正常的盒子,但左上角切成45度角.也不少; 我正在看那个角度的一个很大的角落.这个效果:

我该怎么办呢？

Answer 1

说明

Slantastic(http://meyerweb.com/eric/css/edge/slantastic/demo.html)支持旧浏览器.对于CSS3特定的,请尝试CSS多边形:http://alastairc.ac/2007/02/dissecting-css-polygons/.

码

HTML:

<div class="cornered"></div>
<div class="main">Hello</div>

CSS:

.cornered {
    width: 160px;
    height: 0px;
    border-bottom: 40px solid red;
    border-right: 40px solid white;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
}

结果:http://jsfiddle.net/mdQzH/

替代准则

在边框部分使用透明边框和文字... HTML:

<div class="outer">
<div class="cornered">It's possible to put text up here, too
    but if you want it to follow the slant you have to stack
    several of these.</div>
<div class="main">Hello hello hello hello
hello hello hello hello hello</div>
</div>

CSS:

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

结果:http://jsfiddle.net/76EUw/2

Answer 2

这可以使用svg来完成clip-path.

好处:

1. 使用常规div
2. 没有hacky边界来创建形状
3. 不要应用任何旋转,以便您可以在非均匀背景下轻松完成
4. 不通过CSS添加任何div元素,以便您仍然可以使用常规div背景(例如,如果您有代码修改它!)

以下CSS将塑造div的右下角切断,以便您可以放置​​任何背景:

-webkit-clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);

在线有多个SVG生成器:

• http://bennettfeely.com/clippy/
• http://cssplant.com/clip-path-generator