关于html：如何制作一个纯白色的css三角形


How to make a pure css triangle which has a white center

我想用css创建一个向上和向下的箭头，如下所示：http://apps.eky.hk/css-triangle-generator/

但是，我要设置单色而不是纯色，以使内部为白色，并且三角形周围只有一个边框。 (因此三角形将是多种颜色的，内部是一种颜色，边框是不同的颜色)。

这可能吗？如果可以，怎么办？

要仅使用CSS创建三角形，我们使用带边框的宽度/高度为零的元素：

1
2
3
4
5
6
7
8
.arrow-up {
    width  : 0;
    height : 0;

    border-left   : 50px solid transparent;
    border-right  : 50px solid transparent;
    border-bottom : 50px solid black;
}

由于我们使用边框来创建箭头，因此，我们不仅可以为其提供边框，还可以将一个箭头覆盖在稍大的箭头之上，以显示边框：

HTML-

1
?

CSS-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.top {
    position : absolute;
    top      : 6px;
    left     : 10px;
    width    : 0;
    height   : 0;
    z-index  : 100;
   
    border-left   : 50px solid transparent;
    border-right  : 50px solid transparent;
    border-bottom : 50px solid black;
}
.bottom {
    position : absolute;
    width    : 0;
    height   : 0;
    z-index  : 99;
   
    border-left   : 60px solid transparent;
    border-right  : 60px solid transparent;
    border-bottom : 60px solid red;
}?

这是一个演示：http://jsfiddle.net/jasper/qnmpb/1/

更新资料

然后，您可以将两个三角形DIV元素放入容器中，并根据需要移动该容器：

HTML-

1
 

CSS-？

1
2
3
4
5
#container {
    position : relative;
    top      : 25px;
    left     : 25px;
}

这是一个演示：http://jsfiddle.net/jasper/qnmpb/3/

编辑(2014)：

我刚回到这个答案，并注意到创建双三角形并不需要单独的HTML元素。您可以使用伪元素:before和:after。即将.top选择器替换为.my-element-that-needs-a-triangle:before，将.bottom选择器替换为.my-element-that-needs-a-triangle:after。

相关讨论

我认为您可以通过阅读有关纯CSS思想泡泡的本教程来了解如何做。它正在做您想要的。

http://www.sitepoint.com/pure-css3-speech-bubbles/

如果要在纯CSS中创建带有边框(或类似框阴影的三角形)的三角形，则应使用伪元素:before和:after。

在我的示例中，我将display:inline-block;添加到元素.arrow-dropdown中，以便能够创建带有投影的某种下拉菜单。其后跟.arrow-only，它是带有红色边框的基本三角形。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
body {
    margin: 10px;
    background: #1670c4;
}
.text {
    display: inline-block;
    font-size: 15px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    cursor: default;
}
.arrow-dropdown {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin: 1px 0 0 8px;
    width: 8px;
    height: 7px;
}
.arrow-dropdown:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 7px 4px 0;
    border-color: #fff transparent transparent transparent;
    display: block;
    width: 0;
    z-index: 1;
}
.arrow-dropdown:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px 5px 0;
    border-color: rgba(0,0,0,0.3) transparent transparent transparent;
    display: block;
    width: 0;
    z-index: 0;
}
.arrow-only {
    position: relative;
    vertical-align: middle;
    margin: 10px 0 0 8px;
    width: 8px;
    height: 7px;
}
.arrow-only:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 12px 9px 0;
    border-color: #fff transparent transparent transparent;
    display: block;
    width: 0;
    z-index: 1;
}
.arrow-only:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 11px 0;
    border-color: #f00 transparent transparent transparent;
    display: block;
    width: 0;
    z-index: 0;
    margin:-1px 0 0 -2px;
}
1
  Dropdown text

根据您的使用方式，您可以使用CSS transform: rotate()制作一个带有边框甚至框阴影的三角形，而不会出现三角形边框黑边。在这里查看我的答案：https://stackoverflow.com/a/8867645/918414