css - CSS框上的斜角

Question

我一直在玩 CSS 很短的时间，并试图有一个普通的盒子，但左上角以 45 度角被切断。也不小；我正在看那个角度的一个相当大的切角。这个效果：

我应该怎么做？

Answer 1

Descriptions

Slantastic (http://meyerweb.com/eric/css/edge/slantastic/demo.html) supports old browsers. For CSS3-specific, try CSS polygons: http://alastairc.ac/2007/02/dissecting-css-polygons/.

Code

The HTML:

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

The CSS:

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

The result: http://jsfiddle.net/mdQzH/

Alternative Code

To use transparent borders and text in the border section... The 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>

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

The result: 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

支持：

• 火狐：3.5+
• 铬：24+
• 野生动物园：7+
• 歌剧：15+
• 边缘：76+
• 即：无

检查https://caniuse.com/#feat=css-clip-path

Answer 3

CSS3linear-gradient()可以绘制这个背景。

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

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

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

Answer 4

在不久的将来，您可以使用CSS 形状模块来实现这一点。

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

我们提供的形状可以是 inset()、circle()、ellipse() 或 polygon() 之一。

这目前可以在 webkit 浏览器中完成，但首先您必须执行以下操作：（来自Web 平台的说明）

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

1) 将opera://flags/#enable-experimental-web-platform-features复制并粘贴到地址栏，然后回车。

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

构建多边形形状 - 我使用了这个网站

可以在此处找到有关受支持的各种属性的更多信息

Answer 5

我已经设法只使用额外的跨度来做一些非常相似的事情，并且效果是通过 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;
        }

我已经包含了从父级触发的悬停样式。'border-right: 15px solid #4d4c51;' color 是一种需要与父锚点背景颜色不同的颜色，以创建对角线/角度对比。

Answer 6

我想出了一个响应友好的 Ray Toal fiddle 解决方案：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;
}

希望能帮助到你 ！