css - 使用 Css 创建 Minion Logo

Question

我目前正在尝试生成此内容，作为从著名的《神偷奶爸》电影中创建完整“小黄人”的一部分。

一切顺利，除了我正在尝试使黑色部分透明(即取出内部黑色部分并使其透明)，以便可以看到后面的渐变色)。

---

.wrap {
  height: 300px;
  width: 300px;
  background: lime;
  position: relative;
  overflow:hidden;
  border-radius:50%;
}
.logoWrap {
  height: 200px;
  position: absolute;
  top: 15%;
  left: 15%;
  width: 200px;
  transform: rotate(45deg);
  background: black;
  transition:all 0.8s;
}
.logoWrap:before {
  content: "";
  position: absolute;
  height: 100px;
  width: 100px;
  background: blue;
  top: 25%;
  left: 25%;
  border-radius: 50%;
  transition:all 0.8s;
}
.logoWrap:after {
  content: "";
  position: absolute;
  height: 20px;
  width: 160px;
  background: blue;
  border-bottom: 20px solid black;
  top: 10%;
  right: -40px;
  transform: rotate(-45deg);
  transition:all 0.8s;
}
.wrap:hover .logoWrap{
  background:tomato;
  }
.wrap:hover .logoWrap:after{
   border-bottom: 20px solid tomato;
  }

<div class="wrap">
  <div class="logoWrap"></div>
</div>

---

所以在我的代码片段中，我正在寻找蓝色部分来采用背景色。

---

请注意

• 背景颜色将不是纯色(而是渐变或纹理)。

• 使用图片是不可能的

• 仍在努力“改进”当前 Logo ，因此首选可更改解决方案，即仍然能够快速更改大小(无需更改剪辑路径的 100 个值)

• 我有兴趣添加一些动画/悬停，所以这将加强前面的观点

Answer 1

我想这是没有 SVG 的最接近的东西。在这种情况下，SVG 是唯一的选择。

白色部分透明

这是未编辑问题的答案(第一次修订)

• 我添加了background: transparent; pseudoelement 和ma​​in element。

• 我将 box-shadow 添加到 pseudoelement 并将 overflow: hidden; 添加到主元素。

body {
  background: url(http://i.imgur.com/lDKpzMO.jpg);
  background-size: 40% 60%;
}
.wrap {
  height: 300px;
  width: 300px;
  background: transparent;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.wrap:before {
  content: "";
  position: absolute;
  height: 200px;
  width: 200px;
  top: 50px;
  left: 50px;
  transform: rotate(45deg);
  background: transparent;
  box-shadow: 0px 0px 0px 1000px black;
}
.circ {
  height: 100px;
  width: 100px;
  background: transparent;
  z-index: 10000;
  position: relative;
  top: 100px;
  left: 100px;
  border-radius: 50%;
  overflow: hidden;
}
.circ:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 50px;
  top: 50px;
  left: 50px;
  background: transparent;
  box-shadow: 0px 0px 0px 1000px black;
}
.bar {
  position: relative;
  height: 20px;
  width: 200px;
  top: 30px;
  left: 120px;
  background: black;
}

<div class="wrap">
  <div class="circ"></div>
  <div class="bar"></div>
</div>

编辑

对于你更新的问题，我使用了一个伪元素并添加了一个大的盒子阴影，一个大到它的边变直的盒子阴影。

body {
    background: url(http://i.imgur.com/lDKpzMO.jpg);
    background-size: 40% 60%;
}
div {    
  height: 300px;
  width: 300px;
  position: relative;
  transform: rotate(45deg);
  overflow: hidden;
  margin: 80px;
}
div:before {
    content: "";
    position: absolute;
    height: 120px;
    width: 120px;
    top: 90px;
    left: 90px;
    border-radius: 50%;
    background: transparent;
    box-shadow: -200px 0px 0px 100px black,
        0px 200060px 0px 200000px black,
        0px -200090px 0px 200000px black;
    transform: rotate(-45deg);
}
div:after {
    content: "";
    position: absolute;
    height: 30px;
    width: 120px;
    top: 96px;
    left: 150px;
    background: black;
    transform: rotate(-45deg);
}

<div></div>

输出: