如何在CSS或Javascript中制作弯曲的线条形状

Question

我目前正在开发游戏，目前有四个按钮，

我想将这4个彩色按钮变成弯曲的线条形状，如下例所示

我已经链接了我的CSS并做了一个小提琴，所以你们可以看到我的东西。

JSFIDDLE- http://jsfiddle.net/eh7h7pn1/

Github下载并解压缩以完全查看游戏https://github.com/Jamiex304/Simon_Says_Game_Demo

我的CSS

body {
  background-color: #333;
  color: #fff;
}

ul {
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
  text-align: center;
}

li {
  display: inline-block;
  padding: 3px;
}

.wrapper {
  margin-top:10px;
  margin-bottom:20px;
  width: 650px;
  height: 50px;
  background-color:black;
  position: relative;
  margin: 0 auto;
  border-style: solid;
  border-width: 5px;
}

.wrapper2 {
  position: relative;
  width: 650px;
  height: 700px;
  margin: 0 auto;
  border-style: solid;
  border-width: 5px;
}

.wrapper3{
  position: relative;
  margin-top:20px;
  width: 650px;
  height: 170px;
  margin: 0 auto;
  background-color:black;
  border-style: solid;
  border-width: 5px;
}

.Timer{
  width:300px;
  height:200px;
  margin-top:235px;
  margin-left:177px;
  border:5px solid white;
  border-radius: 50%;
  background-color:black;
  text-align:center;
}

.pad {
  z-index: 1;
  margin: 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
}

.shape1 {
  position: absolute;
  left: 50%;
  margin-left: -50px;
  width: 125px;
  height: 125px;
  background-color: green;
  border-radius: 50%;
}

.shape2 {
  position: absolute;
  left: 50%;
  bottom: 2.5px;
  margin-left: -50px;
  width: 125px;
  height: 125px;
  background-color: red;
  border-radius: 50%;
}

.shape3 {
  position: absolute;
  left: 78%;
  right: 50%;
  bottom: 50%;
  margin-bottom: -50px;
  margin-right: -50px;
  width: 125px;
  height: 125px;
  background-color: purple;
  border-radius: 50%;
}

.shape4 {
  position: absolute;
  left: 0;
  bottom: 50%;
  margin-bottom: -50px;
  width: 125px;
  height: 125px;
  background-color: blue;
  border-radius: 50%;
}

.level, .score {
  width: 50%;
  float: left;
  text-align: center;
}

.sButton {
  width: 30%;
  margin: 0 auto;
  color: black;
  border: 3pt ridge Black;
  font-weight: bold;
}

.start {
  width: 100%;
  height: 30px;
  text-align: center;
}

Answer 1

CSS不能很好地完成这样的形状。 CSS可以对称，圆形，笔直等，但不能弯曲且自然。

CANVAS可以做您喜欢的任何事情。 在2D上下文中有很多辅助函数， 用于创建贝塞尔曲线等。

或尝试SVG。 JS的“点点滴滴”可能会带来非常酷的东西。 退房拉斐尔。 这里有很多数学 ，但是根据您的需要，您会需要一些数学 。 游戏通常会有很多负担。