2

Estoy creando una forma de rombo/diamante (en realidad es un cuadrado con un ángulo de 45° jaja) y el diseño es inspirado en una señal de tránsito. ¿Cómo consigo que el borde negro no quede justamente en el borde sino más bien al interior?

Me explico mejor con esta imagen de una señal de tránsito cualquiera:

SEÑAL DE TRANSITO

$(document).ready(function() {
  $("#navMenu").click(function() {
   //$(".nav").toggleClass("small");
    if ($(".nav").hasClass("small")) {
      $(".nav").removeClass("small");
    } else {
      $(".nav").addClass("small");
    }
  });
});
html, body, .container {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}

.container {
  /*padding:150px;*/
  background: #ebebeb;
}

#navMenu {
  top: 150px;
  left: 200px;
  width: 240px;
  height: 240px;
  z-index: 100;
  border:5px solid #000;
  
  
  background: linear-gradient(90deg, #ffb900, #CCFF00, #ffb900);
  -webkit-background: linear-gradient(90deg, #ffb900, #CCFF00, #ffb900);
  background-size: 400% 400%;
  -webkit-background-size: 400% 400%;
  animation: gradient 5s infinite;
  -webkit-animation: gradient 5s infinite;
}

#navMenu:hover, .nav:hover {
  background: #ffb900;
}

@keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}
@-webkit-keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}

.diamond {
  position: absolute;
  width: 67.5px;
  height: 67.5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  background: #910EC9;
  margin: 10px;
  cursor: pointer;
  box-shadow: 1px 4px 10px #101010;
 

}

.diamond:active {
  background: #710b9e;
  box-shadow: 0px 1px 2.5px #101010;
  transition: 0.1s;
  -webkit-transition: 0.1s;
}

/*.popUp{
  text-align:center;
  border-radius:10px 0px;
  position:absolute;
  top:100px;
  left:330px;
  overflow:hidden;
  background:red;
  width:0px;
  max-width:100px;
}

.#nav1:hover + .popUp{
  width:100px;
}*/

.nav {
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.small {
  top: 186px;
  left: 236px;
  z-index: 10;
  background: #643fc1;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.rotCorrect {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-left: 14px;
  margin-top: 8px;
}

#mainRotCorrect {
  margin-left: 26px;
  margin-top: 28px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  max-width: 90px;
}

i {
  color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="container">
    <div id="navMenu" class="diamond">
      <div id="mainRotCorrect" class="rotCorrect"><i class="fa fa-user-plus fa-5x" aria-hidden="true"></i></div>
    </div>
    
  </div>
</body>

2 respuestas 2

3

Usa box-shadow, este te permite usar uno o varios bordes y si dejas en 0 el tercer valor, no se desenfoca sino que se ve como un borde normal:

.rombo{
  background: yellow;
  border: yellow 2px solid;
  box-shadow: inset 0 0 0 2px black;
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.rombo{
  display: inline-block;
  background: gold;
  border: gold 5px solid;
  box-shadow: inset 0 0 0 5px black, 8px 8px 20px rgba(0,0,0,.5);
  width: 100px;
  height: 100px;
  transform: rotateZ(45deg);
}
<div class="rombo"></div>

Mismo ejemplo de arriba, pero con muchos, muchos más bordes, la clave está en que puedes separarlos por comas e ir agregando cuantos quieras:

body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.rombo{
  display: inline-block;
  background: gold;
  border: gold 5px solid;
  box-shadow: 
     inset 0 0 0 5px black,
     0 0 0 5px black,     
     0 0 0 10px gold,  
     0 0 0 15px black,    
     0 0 0 20px gold, 
     8px 8px 20px 15px rgba(0,0,0,.5);
  width: 100px;
  height: 100px;
  transform: rotateZ(45deg);
}
<div class="rombo"></div>

En tu caso sería, agregando con box-shadow al diamante una línea gruesa del mismo color de fondo, antes de la sombra de atrás y aumentar el grosor de la sombra, algo así:

.rombo{
  box-shadow: 
    0 0 0 5px #910EC9,
    1px 4px 15px #101010;
}

Así es como quedaría en tu caso especifico:

$(document).ready(function() {
  $("#navMenu").click(function() {
   //$(".nav").toggleClass("small");
    if ($(".nav").hasClass("small")) {
      $(".nav").removeClass("small");
    } else {
      $(".nav").addClass("small");
    }
  });
});
html, body, .container {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}

.container {
  background: #ebebeb;
}

#navMenu {
  top: 150px;
  left: 200px;
  width: 240px;
  height: 240px;
  z-index: 100;
  border:5px solid #000;  
  background: linear-gradient(90deg, #ffb900, #CCFF00, #ffb900);
  background-size: 400% 400%;
  animation: gradient 5s infinite;
}

#navMenu:hover, .nav:hover {
  background: #ffb900;
}

@keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}
@-webkit-keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}

.diamond {
  position: absolute;
  width: 67.5px;
  height: 67.5px;
  transform: rotate(45deg);
  background: #910EC9;
  margin: 10px;
  cursor: pointer;
  box-shadow: 
    0 0 0 5px #ffb900,
    1px 4px 15px #101010;
  }

.diamond:active {
  background: #710b9e;
  box-shadow: 0px 1px 2.5px #101010;
  transition: 0.1s;
}

.nav {
  transition: 0.5s;
}

.small {
  top: 186px;
  left: 236px;
  z-index: 10;
  background: #643fc1;
  transition: 0.5s;
}

.rotCorrect {
  transform: rotate(-45deg);
  margin-left: 14px;
  margin-top: 8px;
}

#mainRotCorrect {
  margin-left: 26px;
  margin-top: 28px;
  transform: rotate(-45deg);
  max-width: 90px;
}

i {
  color: #000;
}
<body>
  <div class="container">
    <div id="navMenu" class="diamond">
      <div id="mainRotCorrect" class="rotCorrect"><i class="fa fa-user-plus fa-5x" aria-hidden="true"></i></div>
    </div>
    
  </div>
</body>

1
  • Excelente! Gracias por tomarte tu tiempo y tu explicación detallada!! Commented el 25 abr. 2018 a las 12:25
1

debes agregar dos outline:

outline: 5px solid #CCFF00;
y
outline: 5px solid #ffb900;

$(document).ready(function() {
  $("#navMenu").click(function() {
   //$(".nav").toggleClass("small");
    if ($(".nav").hasClass("small")) {
      $(".nav").removeClass("small");
    } else {
      $(".nav").addClass("small");
    }
  });
});
html, body, .container {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}

.container {
  /*padding:150px;*/
  background: #ebebeb;
}

#navMenu {
  top: 150px;
  left: 200px;
  width: 240px;
  height: 240px;
  z-index: 100;
  border:5px solid #000;
  outline: 5px solid #CCFF00;
  
  
  background: linear-gradient(90deg, #ffb900, #CCFF00, #ffb900);
  -webkit-background: linear-gradient(90deg, #ffb900, #CCFF00, #ffb900);
  background-size: 400% 400%;
  -webkit-background-size: 400% 400%;
  animation: gradient 5s infinite;
  -webkit-animation: gradient 5s infinite;
}

#navMenu:hover, .nav:hover {
  background: #ffb900;
  outline: 5px solid #ffb900;
}

@keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}
@-webkit-keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}

.diamond {
  position: absolute;
  width: 67.5px;
  height: 67.5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  background: #910EC9;
  margin: 10px;
  cursor: pointer;
  box-shadow: 1px 4px 10px #101010;
 

}

.diamond:active {
  background: #710b9e;
  box-shadow: 0px 1px 2.5px #101010;
  transition: 0.1s;
  -webkit-transition: 0.1s;
}

/*.popUp{
  text-align:center;
  border-radius:10px 0px;
  position:absolute;
  top:100px;
  left:330px;
  overflow:hidden;
  background:red;
  width:0px;
  max-width:100px;
}

.#nav1:hover + .popUp{
  width:100px;
}*/

.nav {
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.small {
  top: 186px;
  left: 236px;
  z-index: 10;
  background: #643fc1;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.rotCorrect {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-left: 14px;
  margin-top: 8px;
}

#mainRotCorrect {
  margin-left: 26px;
  margin-top: 28px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  max-width: 90px;
}

i {
  color: #000;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="container">
    <div id="navMenu" class="diamond">
      <div id="mainRotCorrect" class="rotCorrect"><i class="fa fa-user-plus fa-5x" aria-hidden="true"></i></div>
    </div>
    
  </div>
</body>

1
  • Me ha funcionado sin ningún inconveniente, muchas gracias por tu respuesta y tu tiempo Commented el 25 abr. 2018 a las 12:20

Tu Respuesta

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

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