How can I create the shape of side mirrors of a truck/lorry?

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>

I've been trying to generate a lorry/truck in CSS, but am having some difficulty generating the side mirrors, I think mainly due to my bad designing/use of position.

I currently have the above code, which generate the basic lorry shape (not complete by all means).

I would like to add something like:

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

To either side.

Would anyone have any suggestions as to adding this without 'breaking' the current pen?

So far I have tried to generate this shape, using:

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

After Many Attempts, and post writing this question,

i have created this 'wing mirror', but since I am using specific values, placing this 'next' to my lorry, the alignment breaks and so none of the 'bonnet/windscreen/roof align properly, no matter where i put this wing mirror in my html.

My completed wing mirror looks like this:

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

But how can I attach this into my overall lorry? As everything I've tried leads to 'jumpy' elements (they don't 'stick' to the lorry) and they don't align correctly to the side of the elements (the don't appear to left or right of the lorry, possibly due to bad implementation).

web-tiki · Accepted Answer

Disclaimer: I don't believe this approach is the best to create the shape you are after. Depending on your use case, you should look into SVG or a normal png/jpeg.

I added one element for each mirror and used skewed pseudo elements with borders on the .windscreen div for the mirror arms.

To position the mirrors, I added position:relative; to the .windscreen div and inserted the mirrors as a children of that div. This way you can use absolute positioning to put the mirror on the left and right relatively to the windscreen.

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>

Chris Spittles · Answer

Something like this?

I would strongly advise you to use a relatively positioned parent to contain your lorry. I would then use percentage based units to size and position the elements so that the width and the height of the parent can change but the shape inside scales.

The example uses a relatively positioned parent so that all the child elements can be positioned relative to the parent rather than the body. I've also changed everything to percentage based widths and positions so that when you change the width and the height of the parent, the lorry will scale inside it.

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

How can I create the shape of side mirrors of a truck/lorry?

Tags:

html

css

css-shapes

After Many Attempts, and post writing this question,

jbutler483

2 Answers

web-tiki

Chris Spittles

Recent Activity

Donate For Us

How can I create the shape of side mirrors of a truck/lorry?

Tags:

html

css

css-shapes

After Many Attempts, and post writing this question,

jbutler483

2 Answers

web-tiki

Chris Spittles

Related questions

Recent Activity

Donate For Us