Question

我遇到了一个主题网站的这个页面，其中包含一面带有三角形的字段标签： http://www.openblackbelt.com/app/index.php?action=profile

三角形技术是一种很好的口音，可以在没有通常的圆形边框或其他一些过度使用的方法的情况下打破单调形式。

唯一的问题是，我似乎无法确定如何完成三角形重音。我没有看到:before或:after的使用，据我所知，只有一个html元素<label>。任何人都可以自行完成如何执行此技术的细分吗？

Answer 1

除了使用div包含绝对定位div的小型CSS Triangles定位亲属外，它不过是唯一的。我从头做了一个演示，你可以看一下。

div {
    height: 30px;
    width: 200px;
    background: #f00;
    position: relative;
}

div span {
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    right: -30px; 
    border-bottom: 30px solid #f00;
    border-right: 30px solid transparent;
}

如果你想保存一个元素，你可以使用:after伪（在IE中不起作用），你可以试试这个

Demo

div {
    height: 30px;
    width: 200px;
    background: #f00;
    position: relative;
}

div:after {
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    right: -30px; 
    content: " ";
    border-bottom: 30px solid #f00;
    border-right: 30px solid transparent;
}

此处不需要span标记。

说明：我只是使用一个绝对位置元素，height和width设置为0，并使用元素周围的边框，使一个透明，从而创建三角形。而且我使用right来正确定位它。

Answer 2

他们通过定位border-bottom:24px; border-right:24px;

给它div和absolute来做到这一点

Answer 3

@feitla是正确的道路，@ Kzqai具体要求您实现的目标如下：

CSS：

.contact-form label {
border-right: 24px;
}

HTML：

<label for="openbb_username">Enter your email address</label>

三角形的字母装饰或css装饰

3 个答案: