如何在 CSS 框中创建斜角？-css教程-PHP中文网

如何在 CSS 框中创建斜角？

Barbara Streisand

发布： 2024-11-01 23:12:29

原创

295 人浏览过

How to Create a Slanted Corner in a CSS Box?

将斜角应用到 CSS 盒子

为了获得视觉上引人注目的效果，有时需要在 CSS 盒子中引入斜角。这可以立即将一个简单的矩形转变为动态且引人注目的元素。

创建切角框

对于支持 CSS3 的浏览器，多边形属性为这一挑战提供了强大的解决方案。然而，为了更广泛的浏览器兼容性，Slantastic 技术 (http://meyerweb.com/eric/css/edge/slantastic/demo.html) 可能是更好的选择。

实现 Slantastic

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;
}

登录后复制

其他选项

创建带有透明边框的角和文本，您可以实现以下替代方法：

HTML:

<div class="outer">
    <div class="cornered">It's possible to put text up here, too...
    </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;
}

登录后复制

以上是如何在 CSS 框中创建斜角？的详细内容。更多信息请关注PHP中文网其他相关文章！