Question

我使用CSS创建了一个三角形，它运行正常。现在我想使用图像而不是颜色作为边框，但它不起作用。我只想要border-top的边框图片 这是原创的CSS：

.triangle-down
{
    position:absolute;
    width: 0;
    height: 0;
    border-left: 87px solid transparent;
    border-right: 87px solid transparent;
    border-top: 150px solid #14A2E0;

}

修改了CSS以使用图片：

.triangle-down
{
    position:absolute;
    width: 0;
    height: 0;
    border-left: 87px solid transparent;
    border-right: 87px solid transparent;
    border-top: 150px solid;
    -moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
    -webkit-border-image:url(border.png) 30 30 round; /* Safari */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    border-image:url(border.png) 30 30 round;   
}

JSFiddle：http://jsfiddle.net/MnPLh/

Answer 1

这会或多或少地得到你想要的东西。长话短，透明不适用于边界。你需要叠加2个css元素。 http://jsfiddle.net/harendra/TfV8K/

.triangle-down
{
    position:absolute;
    width: 0;
    height: 0;
    border-left: 87px solid white;
    border-right: 87px solid white;
    border-top: 150px solid transparent;
    margin-top:153px;

}


.triangle-down1
{
    top:150px;
    position:absolute;
    width: 0;
    height: 0;
    border-image:url(http://jsfiddle.net/img/top-bg.png) 30 30 round;
    -moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
   -webkit-border-image:url(border.png) 30 30 round; /* Safari */
   -o-border-image:url(border.png) 30 30 round; /* Opera */ 
    border-left: 87px solid transparent;
    border-right: 87px solid transparent;
    border-top: 150px solid transparent;  
}

<div class='triangle-down1'></div>
<div class='triangle-down'></div>

Answer 2

基本上，制作基于CSS的三角形的技巧使用border-image属性并且实际上获得预期的外观似乎主要在于使用的图像。

我上次使用的CSS就是这样的。

#pyramid{
    display:inline-block;
    border: 150px outset transparent;
    border-top:0px outset transparent;
    border-left:150px outset transparent;
    border-right:150px outset transparent;
    border-image: url("pyramid_border_image.png") 150 150 150 150 stretch stretch;
    overflow:visible;
    height  :1px;   width:1px;
    padding :0; margin:-1px;
    }

我确信有些可能会变得稀疏，但当时我只是想看看我是否可以做到，但是我可能很快就会重新审视它，因为我想要一个我的css3 3d事物的金字塔。 / p>

正如我所提到的，诀窍似乎至少对我来说主要是在图像中，特别是边框图像中左下角和右下角的角落。这些角落本身需要在三角形的两个底角处以适当的45度角包含1/2透明和1/2图案。

使用正确制作的图像，之后相当直接。

特定边框的边框图像

2 个答案: