Scratch style shapes using CSS? [closed]

Question

How to create shapes as shown in screenshot below with CSS. The green rectangles look easy to make, but the problems is orange one and blue one. This project is an open source project https://github.com/LLK/scratch-www, but I cannot find the code of above blocks.

Can I get some hints?

image source: https://scratch.mit.edu/projects/editor/?tutorial=getStarted

Answer 1

method 1: Using svg

body {
  background: #f9f9f9;
  background-image: radial-gradient(#dfdfdf 2%, transparent 6%);
  background-position: 0 0, 100px 100px;
  background-size: 100px 100px;
  padding: 2rem;
}

.svg-shape {
  position: relative;
}

.svg-shape span {
  display: block;
  position: absolute;
  padding: 1rem;
  color: #fff;
}

<div class="svg-shape">
  <span>move 10 steps</span>
  <svg>
	<path class="blocklyPath blocklyBlockBackground" stroke="#3373CC" fill="#4C97FF" fill-opacity="1" d="m 0,4 A 4,4 0 0,1 4,0 H 12 c 2,0 3,1 4,2 l 4,4 c 1,1 2,2 4,2 h 12 c 2,0 3,-1 4,-2 l 4,-4 c 1,-1 2,-2 4,-2 H 145.3670997619629 a 4,4 0 0,1 4,4 v 40  a 4,4 0 0,1 -4,4 H 48   c -2,0 -3,1 -4,2 l -4,4 c -1,1 -2,2 -4,2 h -12 c -2,0 -3,-1 -4,-2 l -4,-4 c -1,-1 -2,-2 -4,-2 H 4 a 4,4 0 0,1 -4,-4 z"></path>
</svg>
</div>

method 2: Using CSS clip-path

You can also create it using css clip-path property, which has limited browser support, but you have to play around a bit to get it perfect.

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

I have used https://bennettfeely.com/clippy/ to create clip path quickly.

body {
  background: #f9f9f9;
  background-image: radial-gradient(#dfdfdf 2%, transparent 6%);
  background-position: 0 0, 100px 100px;
  background-size: 100px 100px;
  font-family: sans-serif;
  font-size:18px;
}

.shape-blue {
  position: relative;
  height: 280px;
  width: 280px;
  background: #4274c6;
  color: #fff;
  -webkit-clip-path: polygon( 9% 27%, 22% 27%, 26% 35%, 44% 34%, 48% 25%, 94% 25%, 94% 50%, 50% 50%, 44% 60%, 25% 60%, 20% 51%, 9% 51%);
  clip-path: polygon( 9% 27%, 22% 27%, 26% 35%, 44% 34%, 48% 25%, 94% 25%, 94% 50%, 50% 50%, 44% 60%, 25% 60%, 20% 51%, 9% 51%);
  border: 1px solid #000;
}

.text {
  position: absolute;
  z-index: 1;
  color: #fff;
  font-weight: bold;
  top: 108px;
  left: 60px;
  z-index: 2;
  font-style: 1rem;
}

.text span {
  background: #f9f9f9;
  color: #585e73;
  border: 1px solid #585e73;
  padding: 0.5rem;
  border-radius: 1rem;
}

.shape-blue:before {
  position: absolute;
  content: "";
  display: block;
  top: 0px;
  left: 0px;
  height: 279px;
  width: 279px;
  background-color: #5d98f7;
  -webkit-clip-path: polygon( 9% 27%, 22% 27%, 26% 35%, 44% 34%, 48% 25%, 94% 25%, 94% 50%, 50% 50%, 44% 60%, 25% 60%, 20% 51%, 9% 51%);
  clip-path: polygon( 9% 27%, 22% 27%, 26% 35%, 44% 34%, 48% 25%, 94% 25%, 94% 50%, 50% 50%, 44% 60%, 25% 60%, 20% 51%, 9% 51%);
  display: none;
}

<div class="shape-blue">
  <div class="text">
    move <span>10</span> steps
  </div>
</div>