如何使用 CSS3 变换在块 Div 上创建斜角？-css教程-PHP中文网

如何使用 CSS3 变换在块 Div 上创建斜角？

Patricia Arquette

发布： 2024-10-28 04:12:30

原创

716 人浏览过

How to Create Beveled Corners on a Block Div Using CSS3 Transforms?

在块 Div 上设置斜角样式

在提供的 HTML 文档中，定义了带有实线边框的标准块 div。目标是在 div 的右侧创建斜角效果。

要使用 CSS3 实现此效果，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>

登录后复制

此方法涉及添加一个额外的 div 作为 .box 的 after 元素。该 div 绝对位于 .box 元素上方，并通过倾斜变换来创建斜角效果。

有关进一步说明，请参阅答案中提供的 JSBin 演示。请注意，该示例还包含另一个 div 类 (box2)，它演示了无需 CSS3 声明的替代实现。

以上是如何使用 CSS3 变换在块 Div 上创建斜角？的详细内容。更多信息请关注PHP中文网其他相关文章！