Logo BMW HTML + CSS

Hoy te enseñaremos como crear el logo de BMW en MGPanel

Paso 1

Entramos a MGPanel y nos dirigimos a la sección de Sparks

Paso 2

Creamos un nuevo proyecto

Paso 3

Comenzamos con nuestro html, guardamos y ejecutamos

              <section>
  <div class='circulo1'>
    <div class='marco'>
      <div class='bmw'>
        <span class='b'> B </span>
        <span class='m'> M </span>
        <span class='w'> W </span>
        <div class='circulo2'>
          <div class='triangulo1'>
            <div class='triangulo2'>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
            

Paso 4

Seguimos con css colocando los estilos respectivos, guardamos y ejecutamos

              .circulo1 {
    background-color: #000;
    border-radius: 200px;
    width: 250px;
    height: 250px;
}
.marco {
    width: 239px;
    height: 239px;
    border-radius: 200px;
    border: 2px solid #fff;
    text-align: center;
    margin-left: 4px;
    margin-top: 3px;
    position: absolute;
}
.bmw {
    display: grid;
    color: #fff;
    font-size: 38px;
    font-family: sans-serif;
    font-weight: bold;
    margin-top: 4px;
}  
.letras .b {
    display: flex;
    position: absolute;
    transform: rotate(314deg);
    margin: 26px 17%;  
}  
.letras .w {
    display: flex;
    position: absolute;
    transform: rotate(46deg);
    margin: 25px 70%;
}
.circulo2 {
    background-color: #fff;
    border-radius: 80px;
    width: 152px;
    height: 150px;
    margin-left: 44px;
}
.triangulo1 {
    width: 70px;
    height: 70px;
    padding: 5px 0px 0 0;
    background: #0653b6;
    border-radius: 0 100% 0 0;
    transform: rotate(-90deg);
    margin-left: 4%;
}    
.triangulo2 {
    width: 70px;
    height: 70px;
    padding: 0px 4px 0px 0px;
    background: #0653b6;
    border-radius: 0 100% 0 0;
    transform: rotate(-180deg);
    top: 100%;
    position: absolute;
    right: 100%;
}
.bmw {
    display: grid;
    color: #fff;
    font-size: 38px;
    font-family: sans-serif;
    font-weight: bold;
    margin-top: 4px;
    animation: fadeRightIn 4s;
}  

@keyframes fadeRightIn {
  0% {
    transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
   opacity: 0;
  }
  100% { }
}
            

A partir de este punto solo queda poner a rodar toda tu imaginación y creatividad (cámbiale el tamaño, prueba con otros colores) para darle el aspecto que quieras. 

Si quieres conocer como queda el logo con movimiento, puedes verlo aquí