使用 Css 创建小黄人徽标

Question

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

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

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

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

请注意

背景颜色将不是纯色（而是渐变或纹理）。
不能用图片
仍在 'bettering' 当前徽标上工作，因此 可更改 解决方案将是首选，即仍然能够快速更改大小（无需更改剪辑路径的 100 个值)
我有兴趣添加一些 animation/hover，所以这将加强前面的观点

Answer 1

编辑：这不适用于更新后的问题（黑色部分必须透明）

这个答案应该是一个评论（但我不能评论;））

你试过面膜吗？这里有一篇很棒的文章：http://css-tricks.com/clipping-masking-css/

如果你不能使用它（targeted naviagator 不支持），恐怕你需要重新考虑构造。如果不能使用掩码，则 "transparent" 必须完全为空。也许尝试创建和定位 7 个半椭圆形和 1 个矩形。 (Semi-oval with CSS)

这里有一张图片，其中突出显示的部分是您应该创建的。

Answer 2

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

白色部分透明

这是未编辑问题的答案（第一次修订版）

我添加了background: transparent;伪元素和主要元素。
我在伪元素中添加了box-shadow，在主元素中添加了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>

编辑

对于你更新的问题，我使用了一个 psudoelement 并添加了一个大框阴影，一个大到它的边变直的框阴影。

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>

输出：

Answer 3

尽管它的 svg 版本会更好，但您可以使用一个元素使用框阴影和伪元素来实现此形状：

DEMO

div {
  position: relative;
  width: 400px; height: 400px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  margin: 90px auto;
  overflow: hidden;
}
div:after,
div:before {
  content: '';
  display: block;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
div:after {
  width: 200px; height: 200px;
  margin: 100px 0 0 100px;
  border-radius: 50%;
  box-shadow: 
    -102px 0px 0px 100px #000, 
    140px 300px 0px 200px #000, 
    140px -330px 0px 200px #000;
}
div:before {
  position: absolute;
  transform-origin: 100% 0;
  width: 250px; height: 30px;
  top: 0; right: 0;
  background: #000;
  box-shadow: 63px -60px 0px 0px #000;
}
body {
  background: url('http://lorempixel.com/output/people-q-c-640-480-9.jpg');
  background-size: cover;
}

<div></div>

编辑：

这是此形状的 svg 版本，其中 <mask> 元素更适合 "real life" :

DEMO

svg {
  display: block;
  width: 70%;
  margin: 0 auto;
}
body {
  background: url('http://lorempixel.com/output/people-q-c-640-480-9.jpg') no-repeat;
  background-size: cover;
}

<svg id="lbox" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
  <mask id="c">
    <rect x="0" y="0" width="100" height="100" fill="#fff" stroke-width="0" />
    <rect x="60" y="45" width="40" height="5" fill="#000" stroke-width="0" transform="rotate(-45 50 50)" />
    <circle cx="50" cy="50" r="18" fill="#000" stroke-width="0" />
  </mask>
  <rect mask="url(#c)" x="20" y="20" width="60" height="60" fill="#000" stroke-width="0" transform="rotate(45 50 50)" />
  <rect x="55" y="50" width="15" height="5" fill="#000" stroke-width="0" />
</svg>

使用 Css 创建小黄人徽标

Creating a Minion logo using Css

css

svg

css-shapes

白色部分透明

编辑