造型DIV箭头轮廓 - 制作空心三角形

非常感谢你，我从来没有发表过一个问题，只是简单的搜索！造型DIV箭头轮廓 - 制作空心三角形

现在，我试图用DIV绘制一个箭头。例如：http://i.imgur.com/wZBgv.png

到目前为止代码如下面将画一个三角形：http://i.imgur.com/9nr3b.png

.arrow-small { 
position: absolute; 
bottom: 0; 
left: 0; 
width: 0; 
height: 0; 
border-style: solid; 
border-width: 80px 600px 50px 600px; 
border-color: transparent transparent blue transparent; 
}

一种方法我试过是创建一个小的实心三角形放置在一个大的顶部，其会创建我正在寻找的箭头轮廓，但是我无法找到一种方法让顶部div显示页面背景以完成效果。

为了清楚起见，我的问题：

1）怎样才能创建一个div一个backgroundless箭头？

2）或者，如何在另一个不透明的div的div ontop上显示正文背景？

来源

2012-12-31 kashcraft

jsFiddle Demo: Florescent Green Arrow

我不认为这会工作，因为你要掩盖什么不透明别的东西不透明。如果你能使用CSS3，下面可能会满足您的需求：

<html> 
    <head> 
    <style> 
     .chevron { 
     position: absolute; 
     width: 50px; 
     height: 10px; 
     top: 20px; 
     background-color:red; 
     } 
     .left 
     { 
     left: 0px; 
     -webkit-transform: rotate(340deg); 
     -moz-transform: rotate(340deg); 
     -o-transform: rotate(340deg); 
     -ms-transform: rotate(340deg); 
     transform: rotate(340deg); 
     } 
     .right 
     { 
     left: 43px; 
     -webkit-transform: rotate(20deg); 
     -moz-transform: rotate(20deg); 
     -o-transform: rotate(20deg); 
     -ms-transform: rotate(20deg); 
     transform: rotate(20deg); 
     } 
    </style> 
    </head> 
    <body> 
    <div class='chevron left'></div> 
    <div class='chevron right'></div> 
    </body> 
</html>

我上this page，这是在响应给this question，这听起来接近你发现变换。

来源

2012-12-31 04:34:48 mgamba

造型DIV箭头轮廓 - 制作空心三角形

回答

相关问题