3

tengo un solo rombo bueno es un cuadrado solo que lo rote, solo tengo esto en html:

.rombo-seguridad{
	margin:20px;
	width: 150px;
	height: 150px;      
	border: 1px solid black;
	border-top:75px solid red;
    border-right:75px solid blue;
    border-bottom:75px solid yellow;
	border-left:75px solid white;    
	-webkit-transform: rotate(45deg);     
	-moz-transform: rotate(45deg);     
	-ms-transform: rotate(45deg);     
	-o-transform: rotate(45deg);     
	transform: rotate(45deg);
}
<div class="rombo-seguridad"> </div>

quisiera que los triángulos formados dentro del rombo fueran cuadrados solo que no se como hacerlo.

2
  • Hola, ¿podrías agregar mas información de como quieres que se vea? si es posible una imagen por ejemplo. el 20 ago. 2019 a las 21:09
  • Quieres que el rombo esté relleno con el color correspondiente en cada cara?
    – devconcept
    el 20 ago. 2019 a las 21:23

1 respuesta 1

4

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.

2
  • 1
    Excelente!! muchas gracias era justo a lo que quería llegar el 30 ago. 2019 a las 20:29
  • @Davidrnk, de nada, que tengas buen día. el 30 ago. 2019 a las 20:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.