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

Answer 3

CSS3 linear-gradient()可以绘制此背景。

background: linear-gradient(to bottom right, transparent 50px, blue 50px);

＆＃13;

＆＃13;

body {
  background: linear-gradient(red, orange) no-repeat;
  min-height: 100vh;
  margin: 0;
}
div {
  background: linear-gradient(to bottom right, transparent 50px, blue 50px);
  margin: 25px auto;
  padding: 50px;
  height: 200px;
  width: 200px;
  color: white;
}

＆＃13;

<div>
  Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

在不久的将来，您可以使用the CSS Shapes Module实现这一目标。

使用shape-inside属性 - 我们可以根据形状使文本流动。

我们提供的形状可以是inset（），circle（），ellipse（）或polygon（）之一。

目前可以在webkit浏览器中完成此操作，但首先您必须执行以下操作:(来自Web Platform的说明）

  

启用形状，区域和混合模式：

     

1）复制并粘贴   opera：// flags / #enable-experimental-web-platform-features into   地址栏，然后按Enter键。

     

2）点击该部分中的“启用”链接。

     

3）单击浏览器底部的“立即重新启动”按钮   窗口。

如果您已经这样做了 - 请查看 FIDDLE

看起来像这样：

<div class="shape">
     Text here
</div>

CSS

.shape{
  -webkit-shape-inside: polygon(65px 200px,65px 800px,350px 800px,350px 80px,160px 80px);
  shape-inside: polygon(65px 200px,65px 450px,350px 450px,350px 80px,160px 80px);
  text-align: justify;
}

要构建多边形形状 - 我使用了this site

有关支持的各种属性的更多信息，请参见here

Answer 5

我想出了一个响应友好的Ray Toal小提琴解决方案：http://jsfiddle.net/duk3/hCaXv/

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 llo hello llo hello hello hello llo hello hello hello hello hello hello hello hello</div>
</div>

css：

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 100%;
    box-sizing:border-box;
    height: 0px;
    border-bottom: 2em solid red;
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
}
.main {
    background-color: red;
    padding: 0 2em;
}

希望它有所帮助！

Answer 6

我只使用额外的跨度设法做了非常相似的事情，效果是通过CSS完成的。

jsFiddle来说明。

HTML
<div class="more-videos"> <a href=""><span class="text">More videos</span><span class="corner"></span></a> </div>

CSS

`.more-videos {
     padding: 20px;
 }

    .more-videos a {
        text-decoration: none;
        background-color: #7f7f7f;
        position: relative;
        padding: 10px 10px 5px 15px;
    }

        .more-videos a span {
            font-size: 20px;
            color: #ffffff;
        }

            .more-videos a span.text {
                padding-right: 10px;
            }

            .more-videos a span.corner {
                border-top: 15px solid #7f7f7f;
                border-right: 15px solid #4d4c51;
                border-bottom: none;
                border-left: none;
                bottom: 0px;
                right: 0px;
                position: absolute;
            }

        .more-videos a:hover span.corner {
            border-right: 15px solid #999999;
        }

我已经包含了从父级触发的悬停样式。 ＆＃39; border-right：15px solid＃4d4c51;＆＃39;颜色是需要与父锚背景颜色不同的颜色，以便创建对角线/角度对比度。