与倾斜右下角

Question

我试图在右下角有一个透明遮罩实现了矩形按钮，按本小提琴CSS按钮：

http://jsfiddle.net/c6gUX/

body { 
background: #fff; 
padding: 5em; 
} 
.button { 
    color: #FFFFFF; 
    font-family: 'RalewayRegular', Arial,sans-serif; 
    font-size: 1em; 
    padding: 0.5em 1.2em 0.5em 0.8em; 
    position: relative; 
    text-decoration: none; 
} 
.button:hover { 
    background: linear-gradient(to bottom, #FFA13E 0px, #E56204 100%) repeat scroll 0 0 transparent; 
    color: #FFFFFF; 
} 
.button:after { 
    background: url(http://i.imgur.com/8Vvw1Sw.png) no-repeat scroll 0 0 transparent; 
    bottom: -12px; 
    content: " "; 
    height: 38px; 
    position: absolute; 
    right: -12px; 
    width: 36px; 
    z-index: 99; 
} 
.orange-grad { 
    background: #ffa13e; /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYTEzZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjc4MDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY3ODA1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); 
    background: -moz-linear-gradient(top, #ffa13e 0%, #ff7805 100%, #ff7805 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa13e), color-stop(100%,#ff7805), color-stop(100%,#ff7805)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa13e', endColorstr='#ff7805',GradientType=0); /* IE6-8 */ 
} 

正如你所看到的，我用一种相当古怪的方式实现了它。我没有测试过这个跨浏览器，并怀疑IE搞砸了没有垫片：之后等。

我该如何实现这种跨浏览器的现代？如何在叠加到图像上时使其工作，以便它有效透明？ （见下图）

从PSD：

我在图像上小提琴：

按道理我知道IE6/7需要一个像我”米有点不错。

字长。有时按钮没有“阅读更多”，所以需要100％宽度的解决方案。

编辑

我想用雪碧。 （http://i.imgur.com/z0UYpTX.png）

Answer 1

这很棘手 - 尤其是当您将梯度与斜角相结合时。我能得到的最接近的数字是this fiddle，它利用CSS渐变来达到你以后的效果，基于Lea Verou的awesome article。

相关的CSS是：

.button {  
    background: #ffa13e; /* fallback */ 
    background: -webkit-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%); 
    background: -moz-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%); 
    background: -o-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%); 
    background: linear-gradient(315deg, transparent 10px, #ff7805 10px, #ffa13e 100%); 
} 

这是得到的背景图像，显示通过（据我所知）的唯一途径。缺点是梯度不是从上到下的线性梯度，而是一个角度。我不认为它可以结合多个渐变，以准确地匹配你的视觉。但它是非常接近：

我认为，这是渐进增强的最佳人选 - 旧的IE会得到一个坚实的背景颜色但这是完全可以接受的（即我不会亲自过问尝试对于图像回退）。

注：有过的工作草案和用于梯度语法，其中的一个是梯度的角度的候选推荐之间许多变化：

从IE Blog。因此，前缀版本需要不同的deg值。

Answer 2

利用它.....我认为这将有助于你..用它与UR形象..这将解决跨浏览器的问题...

http://jsfiddle.net/Praveen16oct90/2bZAW/1095/

div { 
    width:200px; 
    height:80px; 
    background: red; 
    top:150px;left:100px; 
    position: relative; 
    } 

div:before { 
      content: ''; 
      position: absolute; 
      top: 40px; right: 0; 
      border-right: 40px solid white; 
      border-top: 40px solid red; 
      width: 20; 
     }