CSS 框上的斜角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7059597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slanted Corner on CSS box
提问by Mach
I have been playing with CSS for only a short time and am trying to have a normal box but with the top left hand corner cut off at a 45 degree angle. Not a small amount either; I'm looking at a quite large corner cut at that angle. This effect:
我一直在玩 CSS 只是很短的时间，我试图有一个正常的盒子，但左上角以 45 度角被切断。数量也不小；我正在看那个角度的一个相当大的切角。这个效果：
How should I go about it?
我该怎么办？
回答by Ray Toal
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/.
Slantastic ( http://meyerweb.com/eric/css/edge/slantastic/demo.html) 支持旧浏览器。对于特定于 CSS3 的，请尝试 CSS 多边形：http: //alastairc.ac/2007/02/dissecting-css-polygons/。
Code
代码
The HTML:
HTML：
<div class="cornered"></div>
<div class="main">Hello</div>
The CSS:
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/
结果：http: //jsfiddle.net/mdQzH/
Alternative Code
替代代码
To use transparent borders and text in the border section... The HTML:
要在边框部分使用透明边框和文本... 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:
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
回答by JBE
This can be done using svg clip-path.
这可以使用 svg 来完成clip-path。
Advantages:
好处：
- Work with a regular div
- No hacky borders to create shapes
- Do not apply any rotation so that you can easily do it on non uniform background
- Does not add any div element through CSS so that you can still work with the regular div background (in case you have code modifying it for example!)
- 使用常规 div
- 没有 hacky 边框来创建形状
- 不要应用任何旋转，以便您可以轻松地在非均匀背景上进行旋转
- 不通过 CSS 添加任何 div 元素，以便您仍然可以使用常规 div 背景（例如，如果您有代码修改它！）
The following CSS will shape the div with the bottom right corner cut off so that you can put any background:
以下 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);
There are multiple SVG generators online:
网上有多个SVG生成器：
Support:
支持：
- Firefox: 3.5+
- Chrome: 24+
- Safari: 7+
- Opera: 15+
- Edge: 76+
- IE: None
- 火狐：3.5+
- 铬：24+
- Safari：7+
- 歌剧：15+
- 边缘：76+
- IE：无
回答by Mohammad Usman
CSS3 linear-gradient()can draw this background.
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>回答by Danield
In the near future you could achieve this with the CSS Shapes Module.
在不久的将来，您可以使用CSS Shapes Module实现这一点。
With the shape-insideproperty - we can make the text flow according to the shape.
有了shape-inside属性——我们可以让文字按照形状流动。
The shape that we provide can be one of inset(), circle(), ellipse() or polygon().
我们提供的形状可以是 inset()、circle()、ellipse() 或 polygon() 之一。
This can currently be done in webkit browsers, but first you have to do the following: (instructions from Web Platform)
这目前可以在 webkit 浏览器中完成，但首先您必须执行以下操作：（来自Web 平台的说明）
To enable Shapes, Regions, and Blend Modes:
1) Copy and paste opera://flags/#enable-experimental-web-platform-features into the address bar, then press enter.
2) Click the 'Enable' link within that section.
3) Click the 'Relaunch Now' button at the bottom of the browser window.
要启用形状、区域和混合模式：
1) 将opera://flags/#enable-experimental-web-platform-features 复制并粘贴到地址栏中，然后按回车键。
2) 单击该部分中的“启用”链接。
3) 单击浏览器窗口底部的“立即重新启动”按钮。
If you've done that - then check out this FIDDLE
如果你已经这样做了 - 那么看看这个FIDDLE
which looks like this:
看起来像这样：
<div class="shape">
Text here
</div>
CSS
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;
}
To contruct the polygon shape - I used this site
构建多边形形状 - 我使用了这个网站
More info on the various properties which are supported can be found here
可以在此处找到有关支持的各种属性的更多信息
回答by Romainpetit
I came up with a responsive friendly solution of Ray Toal fiddle : http://jsfiddle.net/duk3/hCaXv/
我想出了一个响应式友好的 Ray Toal fiddle 解决方案：http: //jsfiddle.net/duk3/hCaXv/
The html :
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>
The css :
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;
}
Hope it helps !
希望能帮助到你 ！
回答by David Barnett
I've managed to do something very similar using only an additional spans and the effect is done via CSS.
我只使用一个额外的跨度就成功地做了一些非常相似的事情，效果是通过 CSS 完成的。
jsFiddleto illustrate.
jsFiddle来说明。
HTML<div class="more-videos">
<a href=""><span class="text">More videos</span><span class="corner"></span></a>
</div>
HTML<div class="more-videos">
<a href=""><span class="text">More videos</span><span class="corner"></span></a>
</div>
CSS
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;
}
I have included a hover style triggered from the parent. The 'border-right: 15px solid #4d4c51;' color is the one that needs to be different from the parent anchor background color in order to create the diagonal/angular contrast.
我已经包含了从父级触发的悬停样式。'border-right: 15px solid #4d4c51;' color 是需要与父锚点背景颜色不同以创建对角线/角度对比度的颜色。
