如何制作具有白色中心的纯css三角形

Question

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

但是，我想将其设置为内部为白色，并且三角形周围只有一个边框，而不是纯色。 （所以三角形将是多色的，内部一种颜色，不同颜色的边框）。

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

Answer 1

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

.arrow-up {
    width  : 0;
    height : 0;

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

由于我们使用边框来创建箭头，我们不能只给它一个边框，而是我们可以将一个箭头覆盖在一个稍大的箭头之上以形成边框的外观：

HTML --

<div class="top"></div>
<div class="bottom"></div>​

CSS --

.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 --

<div id="container">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

CSS --​

#container {
    position : relative;
    top      : 25px;
    left     : 25px;
}

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

编辑（2014 年）：

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

Answer 2

我认为您可以通过查看有关纯 css 思想泡泡的教程来很好地了解该怎么做。它正在做你正在寻找的东西。

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

Answer 3

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

Answer 4

如果你想在纯 CSS 中创建一个带边框（或类似盒子阴影）的三角形，你应该使用伪元素 :before 和 :after。

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

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;
}

<div class="text">
  Dropdown text
</div><div class="arrow-dropdown"></div>

<div class="arrow-only"></div>