使用Css创建Minion徽标

Question

我目前正在尝试将其作为创建一个完整的“奴才”的一部分。来自着名的卑鄙的我的电影。

一切顺利，除了我试图使黑色部分透明（即采用内部黑色部分并使其透明），以便可以看到背后的渐变颜色）。

---

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

所以在我的片段中，我正在寻找蓝色部分来拍摄背景色。

---

请注意

• 背景颜色不是纯色（渐变色或纹理）。

• 使用图片是不可能的

• 仍在努力改善＆＃39;当前的徽标，因此可更改的解决方案将是首选，即仍然能够快速更改大小（无需更改剪辑路径的100个值）

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

Answer 1

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

白色部分透明

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

的答案

• 我添加了background: transparent; 伪元素和主要元素。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

修改

对于你更新的问题，我使用了 psudoelement 并添加了一个大盒子阴影，一个如此大的盒子阴影，它的边变得笔直。

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

输出

Answer 2

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

<强> DEMO

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

---

编辑：

这是这个形状的svg版本，<mask>元素更适合＆＃34;现实生活＆＃34; ：

<强> DEMO

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

这个答案应该是评论（但我无法评论;））

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

如果你不能使用它（不支持有针对性的naviagator），我担心你需要重新考虑这个结构。如果你不能使用面具，“透明”必须是完全空的。 也许尝试创建和定位7个半圆形和1个矩形。 （Semi-oval with CSS）

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