使用CSS抓取样式形状？

Question

如何使用CSS创建形状，如下面的屏幕快照所示。绿色矩形看起来很容易制作，但是问题是橙色的和蓝色的。该项目是一个开源项目https://github.com/LLK/scratch-www，但是我找不到上述代码块的代码。

我可以得到一些提示吗？

图片来源：https : //scratch.mit.edu/projects/editor/?tutorial=getStarted

Answer 1

方法1：使用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>

方法2：使用CSS剪切路径

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>