css - retrovisores - ¿Cómo puedo crear la forma de los espejos laterales de un camión/camión?

los espejos retrovisores deben ajustarse en movimiento

Question

.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: yellow;
  position: absolute;
  z-index: 20;
  border: 1px solid #AAAAAA;
  box-shadow: 0 0 8px 2px yellow;
}
.roof {
  width: 280px;
  height: 80px;
  background-color: gray;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  left: 0;
  z-index: -2;
  position: relative;
}
.windscreen {
  width: 260px;
  height: 75px;
  background: rgb(41, 137, 216);
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(10%, rgba(41, 137, 216, 1)), color-stop(22%, rgba(170, 170, 170, 1)), color-stop(35%, rgba(41, 137, 216, 1)), color-stop(50%, rgba(170, 170, 170, 1)), color-stop(65%, rgba(41, 137, 216, 1)), color-stop(78%, rgba(170, 170, 170, 1)), color-stop(90%, rgba(41, 137, 216, 1)), color-stop(100%, rgba(41, 137, 216, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
  /* IE10+ */
  background: linear-gradient(135deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=''#2989d8'', endColorstr=''#2989d8'', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  margin-left: 10px;
  box-shadow: inset 0 0 0 2px #000;
  /*not sure of this*/
}
.roof-bonnet {
  height: 320px;
  margin-top: -100px;
}
#numberplate {
  height: 40px;
  width: 190px;
  background-color: white;
  bottom: 10px;
  position: relative;
  margin-top: -45px;
  margin-left: 44px;
  border: 2px solid black;
  font-size: auto;
  text-align: center;
}
.circle-headlight {
  margin-top: -55px;
  background-color: white;
  box-shadow: 0 0 8px 2px white;
}
.right-headlight {
  margin-left: 238px;
}

<div class="circle"></div>
<div class="circle" style="margin-left:240px;"></div>


<div class="roof"></div>

<div class="windscreen"></div>

<div class="roof roof-bonnet"></div>
<div class="circle circle-headlight"></div>
<div class="circle circle-headlight right-headlight"></div>
<div id="numberplate">REG PLATE</div>

He estado intentando generar un camión / camión en CSS, pero estoy teniendo algunas dificultades para generar los espejos laterales, creo que se debe principalmente a mi mal diseño / uso de la position .

Actualmente tengo el código anterior, que genera la forma básica del camión (no está completo por todos los medios).

Me gustaría añadir algo como:

         +-------+
|        |        /
|        |         |
|       /|         |
|      //|         |
|     // |         |
|    // /|         |
|   // //|         |
|  // // |_________/
--- +//
-----+  
|
|

A cada lado.

¿Alguien tendría alguna sugerencia para agregar esto sin "romper" la pluma actual?

Hasta ahora he intentado generar esta forma, usando:

#wing-mirror {
    margin-top:40px;
    width: 100px;
    height: 50px;
    background: red;
    position: relative;
    transform: rotate(-90deg);
    border-radius:20px;
}

#wing-mirror:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 10px solid red;
    border-left: 29px solid #fff;
    border-right: 29px solid #fff;
    width: 42px;
    height: 0;
}

Después de muchos intentos, y después de escribir esta pregunta,

He creado este ''espejo retrovisor'', pero como estoy usando valores específicos, colocando este ''siguiente'' a mi camión, la alineación se rompe y, por lo tanto, ninguno de los ''capó / parabrisas / techo se alinea correctamente, no importa dónde coloque este ala espejo en mi html.

Mi espejo de ala completado se ve así:

#wing-mirror {
  margin-top: 40px;
  width: 100px;
  height: 50px;
  background: gray;
  position: relative;
  transform: rotate(-90deg);
  border-radius: 20px;
}
#wing-mirror:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 10px solid gray;
  border-left: 29px solid #fff;
  border-right: 29px solid #fff;
  width: 42px;
  height: 0;
}
.border-div {
  width: 75px;
  background-color: gray;
  height: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-left: 30px;
}
.border-div-top {
  width: 50px;
  background-color: gray;
  height: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-left: 50px;
  margin-top: -20px;
}

<div id="wing-mirror"></div>
<div class="border-div"></div>
<div class="border-div-top"></div>

Pero, ¿cómo puedo adjuntar esto a mi camión en general? Como todo lo que he intentado conduce a elementos "saltones" (no se "pegan" al camión) y no se alinean correctamente al lado de los elementos (no aparecen a la izquierda ni a la derecha del camión). , posiblemente debido a una mala implementación).

Answer 1

Descargo de responsabilidad: no creo que este enfoque sea el mejor para crear la forma que está buscando. Dependiendo de su caso de uso, debe buscar SVG o un png / jpeg normal.

.windscreen un elemento para cada espejo y usé pseudo elementos sesgados con bordes en el div .windscreen para los brazos del espejo.

Para posicionar los espejos, agregué position:relative; a la .windscreen div div. e insertó los espejos como hijos de esa div. De esta manera, puede utilizar la posición absoluta para colocar el espejo a la izquierda y a la derecha en relación con el parabrisas.

DEMO

body{
    padding-left:100px;
}
.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: yellow;
  position: absolute;
  z-index: 20;
  border: 1px solid #AAAAAA;
  box-shadow: 0 0 8px 2px yellow;
}
.roof {
  width: 280px;
  height: 80px;
  background-color: gray;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  left: 0;
  z-index: -2;
  position: relative;
}
.windscreen {
    position:relative;
  width: 260px;
  height: 75px;
  background: rgb(41, 137, 216);
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(10%, rgba(41, 137, 216, 1)), color-stop(22%, rgba(170, 170, 170, 1)), color-stop(35%, rgba(41, 137, 216, 1)), color-stop(50%, rgba(170, 170, 170, 1)), color-stop(65%, rgba(41, 137, 216, 1)), color-stop(78%, rgba(170, 170, 170, 1)), color-stop(90%, rgba(41, 137, 216, 1)), color-stop(100%, rgba(41, 137, 216, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
  /* IE10+ */
  background: linear-gradient(135deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=''#2989d8'', endColorstr=''#2989d8'', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  margin-left: 10px;
  box-shadow: inset 0 0 0 2px #000;
  /*not sure of this*/
}
.roof-bonnet {
  height: 320px;
  margin-top: -100px;
}
#numberplate {
  height: 40px;
  width: 190px;
  background-color: white;
  bottom: 10px;
  position: relative;
  margin-top: -45px;
  margin-left: 44px;
  border: 2px solid black;
  font-size: auto;
  text-align: center;
}
.circle-headlight {
  margin-top: -55px;
  background-color: white;
  box-shadow: 0 0 8px 2px white;
}
.right-headlight {
  margin-left: 238px;
}
.windscreen:after{
    content:'''';
    position:absolute;
    left:100%; bottom:15px;
    width:10px; height:20px;
    transform:skewX(-30deg);
    border-bottom:12px solid #000;
    border-right: 12px solid #000;
    z-index:-1;
}
.windscreen:before{
    content:'''';
    position:absolute;
    right:100%; bottom:15px;
    width:10px; height:20px;
    transform:skewX(30deg);
    border-bottom:12px solid #000;
    border-left: 12px solid #000;
    z-index:-1;
}
.mirror{
    position:absolute;
    left:100%; top:20px;
    margin-left:19px;
    height: 30px;
    width:20px;
    background:#000;
}

.mirror:before, .mirror:after{
    content:'''';
    position:absolute;
    width:100%;
    box-sizing:border-box;
    bottom:100%;
    border-color: #000 transparent;
    border-width: 0 5px 10px 0;
    border-style:solid;
}
.mirror:after{
    bottom:auto;
    top:100%;
    border-width: 7px 3px 0 0;
}
.mirrorL{
    position:absolute;
    right:100%; top:20px;
    margin-right:19px;
    height: 30px;
    width:20px;
    background:#000;
}

.mirrorL:before, .mirrorL:after{
    content:'''';
    position:absolute;
    width:100%;
    box-sizing:border-box;
    bottom:100%;
    border-color: #000 transparent;
    border-width: 0 0 10px 5px;
    border-style:solid;
}
.mirrorL:after{
    bottom:auto;
    top:100%;
    border-width: 7px 0 0 3px;
}

<div class="circle"></div>
<div class="circle" style="margin-left:240px;"></div>


<div class="roof"></div>

<div class="windscreen"><div class="mirror"></div><div class="mirrorL"></div></div>

<div class="roof roof-bonnet"></div>
<div class="circle circle-headlight"></div>
<div class="circle circle-headlight right-headlight"></div>
<div id="numberplate">REG PLATE</div>

Answer 2

¿Algo como esto?

Le recomendaría encarecidamente que utilice un padre relativamente posicionado para contener su camión. Luego usaría unidades basadas en porcentajes para ajustar el tamaño y la posición de los elementos de modo que el ancho y la altura del elemento primario puedan cambiar, pero la forma dentro de las escalas.

El ejemplo utiliza un elemento primario relativamente posicionado para que todos los elementos secundarios puedan posicionarse en relación con el elemento principal en lugar del cuerpo. También cambié todo a porcentajes basados ​​en anchos y posiciones para que cuando cambies el ancho y la altura del padre, el camión se escale dentro de él.

#lorry2 {
 position: relative;
 width: 260px;
 height: 320px;
 float: left;
}
#lorry2 .roof {
 height: 20%;
 background-color: gray;
 border-top-left-radius: 50%;
 border-top-right-radius: 50%;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
}
#lorry2 .windscreen {
 height: 20%;
 background: rgb(41, 137, 216);
 /* Old browsers */
 background: -moz-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
 /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right bottom, color-stop(10%, rgba(41, 137, 216, 1)), color-stop(22%, rgba(170, 170, 170, 1)), color-stop(35%, rgba(41, 137, 216, 1)), color-stop(50%, rgba(170, 170, 170, 1)), color-stop(65%, rgba(41, 137, 216, 1)), color-stop(78%, rgba(170, 170, 170, 1)), color-stop(90%, rgba(41, 137, 216, 1)), color-stop(100%, rgba(41, 137, 216, 1)));
 /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
 /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
 /* Opera 11.10+ */
 background: -ms-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
 /* IE10+ */
 background: linear-gradient(135deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
    /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=''#2989d8'', endColorstr=''#2989d8'', GradientType=1);
 /* IE6-9 fallback on horizontal gradient */
 box-shadow: inset 0 0 0 2px #000;/*not sure of this*/
 position: absolute;
 top: 20%;
 left: 4%;
 right: 4%;
 z-index: 5;
}
#lorry2 .bonnet {
    background-color: gray;
 border-top-left-radius: 50%;
 border-top-right-radius: 50%;
 height: 86%;
 position: absolute;
 top: 14%;
 left: 0;
 right: 0;
}
#lorry2 #numberplate {
 height: 10%;
 background-color: white;
 bottom: 10px;
 position: relative;
 border: 2px solid black;
 font-size: auto;
 text-align: center;
 position: absolute;
 top: 80%;
 left: 15%;
 right: 15%;
}
#lorry2 .headLight {
 position: absolute;
 top: 81%;
 left: 1%;
 width: 13%;
 padding-top: 13%;
 height: 0;
 background-color: white;
 font-size: auto;
 text-align: center;
 z-index: 1;
 border-radius: 50%;
 box-shadow: 0 0 8px 2px #fff;
}
#lorry2 .headLight.right {
 left: auto;
 right: 1%;
}
#lorry2 .fullBeam {
 position: absolute;
 top: 3%;
 left: 1%;
 width: 13%;
 padding-top: 13%;
 height: 0;
 background-color: yellow;
 font-size: auto;
 text-align: center;
 z-index: 1;
 border-radius: 50%;
 box-shadow: 0 0 8px 2px yellow;
}
#lorry2 .fullBeam.right {
 left: auto;
 right: 1%;
}
#lorry2 .wingMirror.left {
 position: absolute;
 width: 15%;
 height: 0;
 padding-top: 15%;
 top: 25%; 
 left: -11%;
}
#lorry2 .wingMirror.right {
 position: absolute;
 width: 15%;
 height: 0;
 padding-top: 15%;
 top: 25%;
 right: -11%;
}
#lorry2 .wingMirror.right .barBottom {
 position: absolute;
 bottom: 0;
 left: 0;
 background: #828282;
 width: 42%;
 height: 20%;
}
#lorry2 .wingMirror.right .barDiagonal {
 position: absolute;
 bottom: 23%;
 left: 20%;
 background: #828282;
 width: 62%;
 height: 20%;
 -moz-transform: rotate(-60deg);
 -webkit-transform: rotate(-60deg);
 -o-transform: rotate(-60deg);
 -ms-transform: rotate(-60deg);
 transform: rotate(-60deg);
}
#lorry2 .wingMirror.right .mirror {
 position: absolute;
 bottom: 15%;
 left: 58%;
 height: 100%;
 width: 60%;
 background: #828282;
 -webkit-border-radius:  0 30% 30% 0;
 border-radius: 0 30% 30% 0;
}
#lorry2 .wingMirror.left .barBottom {
 position: absolute;
 bottom: 0;
 right: 0;
 background: #828282;
 width: 42%;
 height: 20%;
}
#lorry2 .wingMirror.left .barDiagonal {
 position: absolute;
 bottom: 23%;
 right: 20%;
 background: #828282;
 width: 62%;
 height: 20%;
 -moz-transform: rotate(60deg);
 -webkit-transform: rotate(60deg);
 -o-transform: rotate(60deg);
 -ms-transform: rotate(60deg);
 transform: rotate(60deg);
}
#lorry2 .wingMirror.left .mirror {
 position: absolute;
 bottom: 15%;
 right: 58%;
 height: 100%;
 width: 60%;
 background: #828282;
 -webkit-border-radius: 30% 0 0 30%;
 border-radius: 30% 0 0 30%;
}

<div id="lorry2">
 <div class="fullBeam left"></div>
 <div class="fullBeam right"></div>
 <div class="roof"></div>
 <div class="windscreen"></div>
 <div class="bonnet"></div>
 <div class="headLight left"></div>
 <div class="headLight right"></div>
 <div id="numberplate">REG PLATE</div>
 <div class="wingMirror left">
  <div class="barBottom"></div>
  <div class="barDiagonal"></div>
  <div class="mirror"></div>
 </div>
 <div class="wingMirror right">
  <div class="barBottom"></div>
  <div class="barDiagonal"></div>
  <div class="mirror"></div>
 </div>
</div>