使用斜角设计块 div 的样式可以通过多种方式完成。 CSS4 border-corner-shape 仍然是一个选项，但其实现仍悬而未决。因此，我们将深入研究使用 CSS3 变换的解决方案。
在 HTML 文档中，使用所需的类创建一个 div 元素块的名称。
HTML:
<div class="box"> Text Content </div>
在 CSS 中定义样式，如下所示：
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 演示。
的替代解决方案
为了简单起见，请考虑使用另一个 CSS 实现来实现类似的结果没有 CSS3 的第二个 div。请参阅前面提供的 CSS 中的 box2 类。以上是如何在不使用 border-corner-shape 的情况下在 CSS 中为块 div 创建斜角？的详细内容。更多信息请关注PHP中文网其他相关文章！
