如何使一个纯的css三角形有一个白色的中心 [英] How to make a pure css triangle which has a white center

问题描述

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

I want to create an upward and downward facing arrow with css like the following: http://apps.eky.hk/css-triangle-generator/

但是，我不想使用纯色，而是将其设置为白色和三角形周围只有一个边框。 （因此，三角形将是多色的，一种颜色在内部和不同的彩色边框）。

However, instead of a solid color, I want to set it up so the inside is white and there is just a border around the triangle. (So the triangle would be multi-colored, one color on the inside and a different colored border).

这是可能的，如果是这样，

Is this possible, and if so, how can it be done?

推荐答案

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

To create triangles with only CSS we use a zero width/height element with borders:

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

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

由于我们使用边框创建箭头，它是一个边框，但我们可以在一个稍大的箭头顶部叠加一个箭头，以使边框的外观：

Since we are using borders to create the arrow, we can't just give it a border, but we can overlay one arrow on top of a slightly larger arrow to make the appearance of a border:

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元素放在容器中，并移动该容器：

You can then put both of the triangle DIV elements inside a container and move that container however you want:

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/

我刚才回到这个答案，注意到创建双三角形时不需要单独的HTML元素。您可以使用伪元素：之前和：之后。也就是说将 .top 选择器替换为 .my-element-that-needs-a-triangle：before .bottom 选择器与 .my-element-that-needs-a-triangle：after 之后。

I just came back to this answer and noticed that separate HTML elements are not necessary to create your double-triangle. You can use pseudo-elements, :before and :after. I.e. replace the .top selector with something like .my-element-that-needs-a-triangle:before and the .bottom selector with something like .my-element-that-needs-a-triangle:after.

这篇关于如何使一个纯的css三角形有一个白色的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！