CSS框上的斜angular
我只用了很短的时间就玩CSS，想要拥有一个正常的盒子，但是左上angular的angular度是45度。 也不less; 我正在看那个angular度的一个很大的angular落。 这个效果：
我应该怎么做呢？
说明
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
这可以使用svg clip-path来完成。
优点：
- 与一个正规的工作
- 没有hacky边界来创build形状
- 不要施加任何旋转，以便您可以在非统一的背景上轻松地进行旋转
- 不通过CSS添加任何div元素，以便您仍然可以使用常规div背景（例如，如果您有代码修改它，例如！）
下面的CSS将剪切掉右下angular的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生成器：
在不久的将来，你可以通过CSS Shapes模块实现这一点。
利用shape-inside属性 – 我们可以使文本根据形状stream动。
我们提供的形状可以是inset（），circle（），ellipse（）或polygon（）之一。
目前这可以在webkit浏览器中完成，但首先您必须执行以下操作：（来自Web Platform的说明 ）
要启用形状，区域和混合模式：
1）将opera：// flags /＃enable-experimental-web-platform-features复制粘贴到地址栏，然后按回车。
2）点击该部分中的“启用”链接。
3）单击浏览器窗口底部的“立即重新启动”button。
如果你已经这么做了 – 那么看看这个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; }
为了构build多边形的形状 – 我使用这个网站
有关支持的各种属性的更多信息可以在这里find
CSS3 linear-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>
我想出了Ray Toal小提琴响应友好的解决scheme： 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; }
希望它有帮助！
我已经设法做一些非常相似的事情，只用一个额外的跨度，效果是通过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; }
我已经包含从父级触发的hover样式。 “border-right：15px solid＃4d4c51;” 颜色是需要与父锚背景颜色不同以便创build对angular线/angular度对比度的颜色。
