Question

最近我正在制作一个网络应用程序，我使用零图像，我的意思是背景渐变我使用CSS3渐变，所有其他形状，例如导航栏，框，按钮一切都是由CSS3制作的，所以页面只有我们正在查看的用户的150X150图像。（该网站是当地社区讨论区）。

我使用的是javaScript，而不是jQuery。（关键是我想让网站超级快速）。

现在我想制作前一个和下一个的箭头，但我不想使用图像，我想再次使用CSS3。我玩了很多CSS，并在谷歌搜索了一下，但我不知道如何减少盒子的一个角落使它指向并给出箭头的错觉。

有人会帮我用CSS3制作箭头吗？

Answer 1

试试这个，

.arrow {
    height: 0;
    width: 0;
    margin-bottom: 1em;
}

.up {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid red;
}

.down {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid blue;
}

.left {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid green;
}

.right {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid grey;
}

...

已经从CSS课程中复制了这段代码，（TutsPlus CSS提示和技巧）。

CSS生成了形状

1 个答案: