如何使用CSS制作带有倾斜角度、下拉阴影和内嵌阴影的按钮，同时保持宽度灵活？

Question

如何使用CSS使按钮带有角度、投影和内阴影，并具有宽度的灵活性？

我已经尝试在这里http://jsfiddle.net/jitendravyas/6RsnN/制作，但不知道如何给它角度并如何创建围绕它的切除边框。

按钮应该具有宽度的灵活性。

我只是为iPhone制作这个项目，所以可以使用全部的CSS3。

- Jitendra Vyas

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。添加阴影。
  步骤3后的结果是：
  

• 步骤6。添加overflow: hidden; Ta-dum！
  

在 .tag_inner 上使用相同的技巧，但是 box-shadow 应该不是 inset 而是 normal。

请注意，如果您总是使用此技巧，请检查必须使用哪些 vendor 前缀，并将没有前缀的属性放在最后一个位置。

更新：使标记更具语义性-三角形技巧仅使用一个元素。

- Vladimir Starkov

---

@Diodeus，谢谢。刚刚我改进了标记以使用更少的非语义元素。 - Vladimir Starkov

@matmuchrapna - 非常感谢。如果您能使按钮灵活一些，我会很高兴。因此，如果我将字体大小更改为较小的大小，则按钮应更小。 - Jitendra Vyas

@JitendraVyas 它默认情况下是灵活的。这个分支展示了它的灵活性。我会将其添加到答案中。 - Vladimir Starkov

@JitendraVyas 或者它的高度也应该更小吗？ - Vladimir Starkov

@VladimirStarkov - 是的，高度和宽度都要小一些。如果我增加字体大小，按钮的宽度和高度也应该增加。 - Jitendra Vyas

@JitendraVyas 在我的例子中，尽量使用em而不是px来指定大小。 - Vladimir Starkov

Answer 2

这是你的角度，但由于它已经是一个边框，所以你无法对其设置边框：

body {padding:40px; background-color: #1693da;}
.input {
    display:block;
    text-decoration:none;
    padding:10px 60px;    
    background:#117ebb;
    font-size:60px;
    color:#fff;
    border-radius: 20px;
    box-shadow: 0px 10px 0px #003355;
    position:relative;
}

.input:after {
    position:absolute;
    top:0;
    left:-32px;
    content:" ";
    width: 0;
    height: 0px;
    border-top: 45px solid transparent;
    border-bottom: 45px solid transparent;
    border-right:45px solid #117ebb;
}

- Diodeus - James MacFarlane

---

谢谢您提供的角度，但它们是固定宽度的。 - Jitendra Vyas

不，它们是固定高度的。无论如何 - 我认为如果没有图像，你所做的事情是不可能的。也许这会有所帮助：http://chrisbewick.com/blog/css/generating-double-borders-with-css/ - Diodeus - James MacFarlane

@Diodeus，我发了我的纯CSS解决方案。 - Vladimir Starkov