如何斜切一个块div的angular落？
我有以下的HTML文件：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег DIV</title> <style type="text/css"> .block1 { width: 200px; background: #ccc; padding: 5px; padding-right: 20px; border: solid 1px black; float: left; } </style> </head> <body> <div class="block1">Text Content</div> </body> </html> 我如何描述风格以获得以下内容？ 
直到CSS4 border-corner-shape属性处于危险之中！ 并没有实现 ，这可以通过使用CSS3转换来完成（为了使border属性免费的进一步使用）：
HTML：
<div class="box"> Text Content </div>
CSS：
.box { width: 200px; height: 35px; line-height: 35px; padding: 0 5px; background-color: #ccc; padding-right: 20px; border: solid 1px black; border-right: 0; position: relative; } .box:after { content: ""; display: block; background-color: #ccc; border: solid 1px black; border-left: 0; width: 35px; height: 35px; position: absolute; z-index: -1; top: -1px; /* pull it up because of 1px border */ right: -17.5px; /* 35px / 2 */ transform: skew(-45deg); -o-transform: skew(-45deg); -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); }
这里是JSBin演示 。
注意：在上面的例子中有另一个div有box2 class属性，它没有使用CSS3声明，你可能会考虑使用它;）
最有可能的是使用不可变的边界技巧。 网上有一些“三angular形生成器”，例如这个
如果我描述这样的文件：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег DIV</title> <style type="text/css"> .block1 { width: 300px; height: 0px; border-style: solid; border-width: 200px 200px 0 0; border-color: #f200ff transparent transparent transparent; } </style> </head> <body> <div class="block1">Text Content</div> </body> </html>
我几乎得到了你所需要的东西，但我不明白为什么文本不在图中？
这是解决scheme 。
CSS和HTML：
ul { position: relative; overflow: hidden; font: 14px Arial; margin: 0; padding: 0; list-style: none; text-align: center; } ul:before { content: ""; position: absolute; z-index: -1; left: 124px; margin-left: -120px; width: 0; border-left: 0 solid transparent; border-right: 230px solid transparent; border-top: 179px solid #CCCCCC; } li { height: 3.8em; line-height: 3em; position: relative; margin-left: -562px; } li:after, li:before { content: ""; display: block; height: 0.4em; background: #fff; width: 100%; }
<ul> <li>Text Content</li> </ul>
