Вопросы Теги

создать логотип с css3

Я хотел бы создать логотип Vodafone с помощью css, например, такой: enter image description here

Я знаю, что некоторые люди могут рисовать что угодно с помощью css. Я не могу понять, как сделать форму капли слезы. Это то, что я имею сейчас: 

#logoMain {
  width: 100px;
  height: 100px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 50%;
  box-shadow: 0px 0px 50px 0px #999 inset;
  position: relative;
}

#logoMainafter {
  width: 100px;
  height: 100px;
  margin-top: -35px;
  margin-left: 55px;
  display: block;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -webkit-filter: blur(10px);
}

#logoInside {
  width: 50px;
  height: 50px;
  margin: 24px;
  background-color: #fe0000;
  border: 1px solid red;
  border-radius: 50%;
  box-shadow: 0px 0px 15px 3px #a80000 inset;
}
<body>
  <div id="logoMain">
    <div id="logoInside"></div>
    <div id="logoMainafter"></div>
  </div>
</body>

Может кто-нибудь дать мне какие-либо идеи, как создать это необычная форма?

10
задан Dharman 16 June 2019 в 16:23
поделиться