在包含类为“block1”的块 div 的 HTML 文档中，目标是在 div 的右侧创建一个斜角，如提供的图像所示。
要在不使用即将推出的 CSS4 border-corner-shape 的情况下实现此效果属性，我们将 CSS3 转换与基于位置的技术结合使用。
HTML:
<code class="html"><div class="box"> Text Content </div></code>
CSS:
<code class="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;
right: -17.5px;
transform: skew(-45deg);
-o-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
}</code>此实现包含以下技术：
以上是如何使用 CSS3 变换在块 Div 上实现斜角？的详细内容。更多信息请关注PHP中文网其他相关文章！
