Search code examples
htmlcsssvgcss-shapesclip-path

Scratch style shapes using CSS?

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?

enter image description here

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

Solution

  • 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 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>