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

Question

是否可以使用CSS创建一个折痕按钮效果来实现像这样的图像（不包括中间的白色图标）：

我认为中心左侧有一个非常微弱的白色阴影/发光，在较轻的一侧，在黑暗的一侧有一个微弱的暗影或中心右侧的东西。 / p>

我已尝试使用多级渐变，双色调效果很简单，但那些白/暗阴影可能会出问题。

Answer 1

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

div {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#34495e+0,3f4c6b+50,34495e+50,2c3e50+50,2c3e50+100 */
  background: #34495e;
  /* Old browsers */
  background: -moz-linear-gradient(left, #34495e 0%, #3f4c6b 50%, #34495e 50%, #2c3e50 50%, #2c3e50 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #34495e 0%, #3f4c6b 50%, #34495e 50%, #2c3e50 50%, #2c3e50 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #34495e 0%, #3f4c6b 50%, #34495e 50%, #2c3e50 50%, #2c3e50 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#34495e', endColorstr='#2c3e50', GradientType=1);
  /* IE6-9 */
}

<div></div>

Answer 2

这是另一个解决方案，使用粗圆边框

div {
  width: 140px;
  height: 140px;
  box-sizing: border-box;
  border-radius: 50%;
  border-left: 70px solid #5c6a8f;
  border-right: 70px solid #53618c;
}

<div></div>

Answer 3

您可以使用选择器创建半圆并将其显示在圆圈上

＆＃13;

＆＃13;

.icon{
  background: red;
  width: 100px;
  height: 100px;  
  border-radius:50%
}
.icon:before{
    content: '';
    width: 50px;
    height: 100px;
    border-radius: 0 100px 100px 0;
    background: blue;
    display: block;
    margin-left: 50px;

 }

＆＃13;

<div class="icon"><div>

＆＃13;

＆＃13;

＆＃13;