Question

我想知道是否可以制作没有html代码的形状，只能使用css。

实施例：我有一个菜单： HTML

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</nav>

对于每个菜单项，我想在其末尾添加一个三角形，而不向代码添加其他html标记，并将它们与文本对齐。

CSS选择器:after可以实现吗？

Answer 1

是的，你可以。

点击此处查看示例。

http://jsfiddle.net/m4fkW/

HTML

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</nav>

CSS

li:after{
    content:" ";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid red;
}

Answer 2

要使三角形与文本对齐并使用:after选择器，这就是解决方案。

（João Mosmann让我走上正确的道路this answer）

HTML：

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</nav>

CSS

li{
    position:relative;
}
li:after{
    content:" ";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid red;
    position:absolute;
    top:5px;
    margin-left:10px;
}

检查FIDDLE

Answer 3

使用以下代码：

ul li:after{url('Traingle url goes here')}

Answer 4

纯CSS可以实现这一点。

请查看this link以获取完整的形状列表。

但三角形在这里：

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

以及网站上的更多内容。

Answer 5

li:after { content: url(img.jpg); }

使用：after标签的形状

5 个答案: