如何使这个按钮是CSS的角度，下拉阴影，插入阴影与宽度的灵活性

如何使这个按钮是CSS的角度，下拉阴影，插入阴影与灵活性的宽度

我试着在这里制作，但不知道如何给它提供角度，以及如何在它周围创建剪切边界

按钮的宽度应灵活

---

我只为iphone制作了这个，所以完整的CSS3是允许的

这是您的角度，但因为它已经是一个边框，所以您不能在其上放置边框：

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;
}

最重要的是：

演示： 虽然我试着做了一个像图中一样的按钮，但有些部分可能不一样。会认为这是一个概念证明。

此按钮可以是纯

CSS

，只有使用此标记的大量额外标记：

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

返回

使用长方体阴影创建三角形的主要技巧包括以下几个步骤：

• 步骤1。创建元素“.triangle”-它将是真实三角形的换行符

• 步骤2。应用<代码>位置：绝对，固定其

  宽度和
  高度：
  
  红色背景色仅用于演示
  
  
  

• 步骤3。创建大正方形元素“.triangle:：before”-第6步之后将是“真实”三角形

• 步骤4。将其旋转45度（

  变换：旋转（45度）

  ）

• 步骤5。添加框阴影。
  步骤3之后的结果是：
  

• 步骤6。添加

  溢出：隐藏Ta dum
  
  
  

在

.tag_inner

上，使用相同的技巧，但是

框阴影

不应该是

插入

而是正常的

请注意，如果要使用此技巧，请始终检查必须使用的

供应商

前缀，并将不带前缀的属性放在最后一个位置

---

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

感谢角度，但这些是固定宽度不，它们是固定高度。不管怎么说，我认为没有图像你是不可能做到的。也许这会有所帮助：@Diodeus我发布了我的纯csssolution@Diodeus非常感谢。一分钟前，我改进了标记，减少了非语义元素的使用。@matmuchrapna-非常感谢。我想知道你能不能把这个钮扣弄灵活一点。所以，如果我将字体大小更改为较低的大小，则按钮应为smaller@JitendraVyas默认情况下，它是灵活的。表现出灵活性。我会加上它来回答。@JitendraVyas或者它的高度也应该更小？@VladimirStarkov-是的，高度和宽度都更小。如果我增加字体大小，按钮的宽度和高度应该增加