如何制作这个按钮是带有角度,投影,插入阴影的CSS,宽度灵活

Question

如何制作这个按钮是带有角度,投影,插入阴影的CSS,宽度是否灵活？

我试图在这里http://jsfiddle.net/jitendravyas/6RsnN/,但不要如何给它角度以及如何在它周围创建切口边框.

按钮的宽度应灵活.

我只是为iPhone制作这个,所以允许完整的CSS3.

Answer 1

在最后的结果是:

纯css蓝色按钮http://img832.imageshack.us/img832/8258/664d7b5656434db68cbee8b.png

证明灵活性:

虽然我试图在图片中制作一个按钮,但有些部分可能不一样.会认为这是一个概念证明.

这个按钮可以是纯粹的,CSS 只有这个标记有很多额外的标记:

<a class="btn">
    <span class="triangle"></span>
    <span class="btn_inner">
        <span class="triangle"></span>
        Back
    </span>
</a>

使用box-shadow创建三角形的主要技巧包括几个步骤:

• 第1步.创建元素'.triangle' - 它将是真实三角形的包装.
• 第2步.应用position: absolute;,修复它width和height:
  红色背景色为演示版
  
• 第3步.创建大方形元素'.triangle :: before' - 在步骤6之后它将是'真正的'三角形
• 第4步.把它转45度(transform: rotate(45deg)).

• 第5步.添加box-shadow.
  第3步之后的结果是:
  

• 第6步.添加overflow: hidden; Ta-dum!
  

在.tag_inner使用相同的技巧,但box-shadow应该不是inset正常的.

请注意,如果您将使用此技巧,请始终检查vendor必须使用的前缀,并在最后一个位置放置不带前缀的属性.

更新:使标记更具语义 - 只有三角形技巧.