Puedes colocar 4 divs cuadrados con los colores de fondo dentro del div principal y luego rotarlo de la siguiente forma:
.rombo-seguridad{
margin:20px;
width: 150px;
height: 150px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.rombo{
width: 75px;
height: 75px;
position: absolute;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
top: 75px;
}
.green{
background-color: green;
left: 75px;
}
.yellow{
background-color: yellow;
top: 75px;
left: 75px;
}
<div class="rombo-seguridad">
<div class="rombo red"> </div>
<div class="rombo blue"> </div>
<div class="rombo green"> </div>
<div class="rombo yellow"> </div>
</div>
Para que se los cuadrados se mantengan en sus posiciones puedes usar position: absolute;
y para acomodar su posición top
y left
.
Si deseas agregar un centro blanco como en el código de la pregunta, puedes agregar un div con fondo white
en medio del rombo según sus medidas:
.rombo-seguridad{
margin:20px;
width: 150px;
height: 150px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.rombo{
width: 75px;
height: 75px;
position: absolute;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
top: 75px;
}
.green{
background-color: green;
left: 75px;
}
.yellow{
background-color: yellow;
top: 75px;
left: 75px;
}
.white{
background-color: white;
top: 37px;
left: 37px;
}
<div class="rombo-seguridad">
<div class="rombo red"> </div>
<div class="rombo blue"> </div>
<div class="rombo green"> </div>
<div class="rombo yellow"> </div>
<div class="rombo white"> </div>
</div>
Espero te sea de ayuda, saludos.