是否可以仅使用CSS创建双色调折痕/颜色效果

是否可以使用CSS创建折痕按钮效果以实现类似于此图像的效果（不包括中间的白色图标）：

我认为在中心的左侧，在较亮的一侧有一个非常微弱的白色阴影/辉光，在中心的右侧，在黑暗的一侧有一个微弱的黑色阴影或其他东西

---

我尝试过使用多站渐变，双色调的颜色效果很简单，但是那些白色/黑色阴影可能会有问题。

最简单的方法是使用渐变。注意，由于使用了百分比，此解决方案是完全可伸缩的

div{
宽度：100px；
高度：100px；
边界半径：100%；
/*Permalink-用于编辑和共享此渐变：http://colorzilla.com/gradient-editor/#34495e+0,3f4c6b+5034495E+50,2c3e50+50,2c3e50+100*/
背景#34495e；
/*旧浏览器*/
背景：-莫兹线性梯度（左，#34495e0%，#3f4c6b50%，#34495e50%，#2c3e50%，#2c3e50 100%）；
/*FF3.6-15*/
背景：-webkit线性梯度（左，#34495e 0%，#3f4c6b 50%，#34495e 50%，#2c3e50 50%，#2c3e50 100%）；
/*铬10-25，Safari5.1-6*/
背景：线性梯度（向右，#34495e 0%，#3f4c6b 50%，#34495e 50%，#2c3e50 50%，#2c3e50 100%）；
/*W3C、IE10+、FF16+、Chrome26+、Opera12+、Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#34495e'，endColorstr='#2c3e50'，GradientType=1）；
/*IE6-9*/
}

---

这里还有一个解决方案，使用粗圆角边框

div{
宽度：140px；
高度：140像素；
框大小：边框框；
边界半径：50%；
左边框：70px实心#5c6a8f；
右边框：70px固体#53618c；
}

---

您可以使用after选择器创建一个半圆，并将其显示在该圆上

。图标{
背景：红色；
宽度：100px；
高度：100px；
边界半径：50%
}
.图标：之前{
内容：''；
宽度：50px；
高度：100px；
边界半径：0 100px 100px 0；
背景：蓝色；
显示：块；
左边距：50像素；
}

---

渐变在你的情况下有效吗？是的，渐变很好，但正如我所说，我只能得到基本的双色调效果。这是非常微妙的白色/黑色阴影在中心，我无法得到。我不知道我们是否指的是同一件事，但这看起来更像是一个阴影或东西的“标记”形状比背景/梯度。如果你把它放大，你可以看到一个微弱的白色辉光沿左折痕，和一个黑暗的辉光或线在右折痕。这很微妙，但我认为这会有所不同。这是我无法复制的部分。也许像这样聪明，但不可扩展。是的，这相当不错。我想知道我是否可以在中间的两条线之间粘贴更多的渐变，以便沿着折痕/边缘的右侧获得暗线。坡度上的停车次数有限制吗？没有，没有限制。我在渐变片段中留下了注释，其中包含了一个编辑渐变的链接。你可以用它来做进一步的实验。