How can I make a curvy line shape in CSS or Javascript

Question

I currently developing a game and i currently have four buttons,

I am looking to turn those 4 colored buttons in curvy line shapes like the example below

enter image description here

I have linked my css and made a fiddle so you guys can see what i have.

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

Github download and unzip to see the game fully https://github.com/Jamiex304/Simon_Says_Game_Demo

My 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;
}

Aw man, I selected "Insane", got ready, hit "start", .... and nothing happened. — Rudie
– Rudie, Commented Oct 19, 2014 at 1:39
If you want to make a game in HTML, you should look into canvas. You won't go too far with dHTML, even with advanced CSS. What you want to do is trivial in canvas, but a pain in CSS and would probably not work perfectly on all browsers — Caio Vianna Lima Netto
– Caio Vianna Lima Netto, Commented Oct 19, 2014 at 1:40
CSS is not so good at making those shapes. CANVAS is. Or SVG. Take a look at Raphael — Rudie
– Rudie, Commented Oct 19, 2014 at 1:40
@Rudie just for u i have linked the full game on github go nuts and maybe u can help me with this question as well still waiting on an answer stackoverflow.com/questions/26391577/… — Jamiex304
– Jamiex304, Commented Oct 19, 2014 at 1:54
@Jamiex304 How about stackoverflow.com/questions/26391577/… ? — Rudie
– Rudie, Commented Oct 19, 2014 at 2:07

Rudie · Accepted Answer · 2014-10-19 01:43:14Z

2

CSS doesn't do shapes like that very well. CSS does symmetric, round, straight etc, but not curvy and organic.

CANVAS can do anything you like. There's a bunch of helper functions in the 2D context, to make bezier curves etc.

Or try SVG. Very cool stuff possible with a 'little bit' of JS. Check out Raphael. There's a lot of math in there, but, depending on your needs, you're gonna need some. Games usually have a load.

answered Oct 19, 2014 at 1:43

Rudie

54.2k42 gold badges137 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I make a curvy line shape in CSS or Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related