使用 Css 创建 Minion 徽标答案

【问题标题】：Creating a Minion logo using Css使用 Css 创建 Minion 徽标
【发布时间】：2016-05-02 17:49:20
【问题描述】：

我目前正在尝试将其作为从著名的《神偷奶爸》电影中创建完整“奴才”的一部分。

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

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

所以在我的 sn-p 中，我正在寻找蓝色部分来获取背景色。

请注意

背景颜色将不是纯色（而是渐变或纹理）。
使用图片是不可能的
仍在努力“改进”当前徽标，因此可更改解决方案将是首选，即仍然能够快速更改大小（无需更改剪辑路径的 100 个值）
我有兴趣添加一些动画/悬停，所以这将加强前一点

【问题讨论】：

说实话...从fun to do 练习的角度来看这很有趣，但我会使用 SVG 代替...简单得多，不需要所有那些无关的 div/伪元素.
@Paulie_D：还没有开始使用 SVG - 目前仍在微调 css。
@jbutler483 当我使圆圈透明时，我得到黑色菱形的背景，而不是绿色
@MohitBhasi：这是我问的原因。
@jbutler483 哈哈，好吧我尽力了

标签： css svg css-shapes

【解决方案1】：

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

白色部分透明

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

我添加了background: transparent; 伪元素和主元素。
我将 box-shadow 添加到 pseudoelement 并将 overflow: hidden; 添加到 main 元素。

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);
}

&lt;div&gt;&lt;/div&gt;

输出：

【讨论】：

@jbutler483 和我一起思考...... 尽管如此，仍然有人怀疑 css 类的影响越来越大，这阻碍了人们理解样式方向对代码的重要性，否则它更容易使用位置：绝对而不是位置：相对

【解决方案2】：

虽然 svg 版本会更好，但您可以使用 box-shadows 和伪元素通过一个元素来实现此形状：

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;
}

&lt;div&gt;&lt;/div&gt;

编辑：

这是这个形状的 svg 版本，带有更适合“现实生活”的 <mask> 元素：

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>

【讨论】：

【解决方案3】：

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

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

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

如果你不能使用它（不支持目标导航器），恐怕你需要重新考虑构造。如果不能使用遮罩，则“透明”必须完全为空。也许尝试创建和定位 7 个半椭圆形和 1 个矩形。 (Semi-oval with CSS)

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

【讨论】：