4

我使用 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/

4

2 回答 2

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>
于 2013-01-01T14:12:22.310 回答
0

基本上，使基于 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 东西的金字塔。

正如我所提到的，至少在我看来，这个技巧主要存在于图像中，特别是边框图像中左下角和右下角的角块。这些角本身需要让它们的正方形在三角形的两个底角的适当 45 度角处包含 1/2 透明和 1/2 图案。

有了正确制作的图像，之后就相当简单了。

于 2013-05-10T14:19:59.790 回答