0

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

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

唯一的问题是，我似乎无法真正确定三角形重音是如何完成的。我看不到:beforeor的任何用途，据我所知，:after只涉及一个 html 元素。<label>任何人都可以自己分解如何执行此技术吗？

4

3 回答 3

2

它只不过是一个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 中不起作用），你可以试试这个

演示

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标签。

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

于 2013-07-30T05:28:45.280 回答
1

他们通过给它一个border-bottom:24px;和border-right:24px;定位div absolute

于 2013-07-30T05:29:08.860 回答
0

@feitla 是在正确的道路上，@Kzqai 具体你所要求的实现如下：

CSS：

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

HTML：

<label for="openbb_username">Enter your email address</label>
于 2013-07-30T05:39:00.823 回答