如何在 CSS 或 Javascript 中制作曲线形状答案

【问题标题】：How can I make a curvy line shape in CSS or Javascript如何在 CSS 或 Javascript 中制作曲线形状
【发布时间】：2014-10-19 01:36:59
【问题描述】：

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

我希望将这 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;
}

【问题讨论】：

天哪，我选择了“Insane”，准备好了，点击“开始”，....什么也没发生。
如果你想用 HTML 制作游戏，你应该研究一下画布。即使使用高级 CSS，您也不会使用 dHTML 走得太远。您想要做的在画布中微不足道，但在 CSS 中很痛苦，并且可能无法在所有浏览器上完美运行
CSS 不太擅长制作这些形状。帆布是。或 SVG。看看Raphael
@Rudie 只是为了你，我已经在 github 上链接了完整的游戏发疯了，也许你可以帮助我解决这个问题，但仍在等待答案stackoverflow.com/questions/26391577/…
@Jamiex304 stackoverflow.com/questions/26391577/… 怎么样？

标签： javascript html css design-patterns css-shapes

【解决方案1】：

CSS 不能很好地处理这样的形状。 CSS 可以做对称、圆、直等，但不是曲线和有机的。

CANVAS 可以做任何你喜欢的事情。在 2D 上下文中有一堆辅助函数，to make bezier curves 等。

或者试试 SVG。使用“一点点” JS 就可以实现非常酷的东西。 Check out Raphael. 里面有很多 math，但是，根据你的需要，你会需要一些。游戏通常有负担。

【讨论】：