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:
$(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>