CSS3月亮形状

Question

我想创建一个这样的按钮:

我不知道如何在按钮顶部创建一个浅月亮形状.

这仍然很遥远:小提琴演示.

.moon {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   box-shadow: 15px 15px 0 0 green;
}

Answer 1

只需一点点,inset您就可以在对象顶部设置阴影样式.

例如新月形状.

而且,这是你想要的按钮.

.moon {
  background-color: #222;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid #222;
  /* I set 2 shadows where the first one doesn't have blur and spread for firefox fix. */
  box-shadow: inset 0px 16px #999, inset 0px 16px 1px 1px #999;
  -moz-box-shadow: inset 0px 16px #999, inset 0px 16px 1px 1px #999;
}

<div class="moon"></div>

Answer 2

虽然box-shadow方法很好,但它不能像在提供的图像中那样在月球上产生椭圆形切口.切口是圆形的,并且具有与容器圆相同的半径.

如果需要椭圆切割,那么我们可以使用伪元素(或)径向渐变.

使用伪元素:

.moon {
  position: relative;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 3px solid rgb(29, 27, 28); /*this can sometimes create a background bleed */  
  background: rgb(161, 159, 160);
  background-clip: content-box; /* to prevent the background bleed */
  box-shadow: inset 0px 0px 0px 1px rgb(29,27,28); /* to prevent the background bleed */
  overflow: hidden;
}
.moon:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 120%;
  top: 40%;
  left: -12.5%;
  background: rgb(35, 31, 32);
  border-radius: 60%/50%;
}
body {
  background: rgb(7, 5, 6);
}

<div class='moon'></div>

使用径向渐变:

.moon{
  height: 50px;
  width: 50px;
  background: radial-gradient(ellipse farthest-corner at 33% 100%, rgb(35, 31, 32) 45%, rgb(161, 159, 160) 47%);
  background-size: 150% 100%;
  border: 3px solid rgb(29, 27, 28);
  border-radius: 50%;
}
body {
  background: rgb(7, 5, 6);
}

<div class='moon'></div>

Answer 3

这是一个使用线性梯度的 svg 解决方案。
添加了箭头，因为它看起来更像一个按钮：D

#play {
  fill: white;
}
#Play:hover {
  stroke: firebrick;
  stroke-width: 2;
}

<h1>Svg solution</h1>
<svg viewBox="0 0 100 100" width="75px" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient x1="0" x2="0" y1="0" y2="1" id="LinearGradient1">
      <stop offset="0%" stop-color="white" stop-opacity="1" />
      <stop offset="50%" stop-color="black" stop-opacity="1" />
    </linearGradient>
  </defs>
  <circle cx="50" cy="50" r="45" fill="url(#LinearGradient1)" stroke="black" stroke-width="5"></circle>
  <polygon id="Play" points="40,30 40,70 70,50 40,30" fill="white" />
</svg>