What is a promise in Javascript?

Question

Jheyman Mejia

Asked: 2020-04-25 13:21:50 +0800 CST 2020-04-25 13:21:50 +0800 CST 2020-04-25 13:21:50 +0800 CST

inner border in div

772

I'm creating a rhombus/diamond shape (it's actually a square with a 45° angle haha) and the design is inspired by a road sign. How do I get the black border not to be just on the edge but rather to the inside?

I explain myself better with this image of any traffic signal:

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

Voted

Edgar Gutiérrez · Answer 1 · 2020-04-25T13:52:53+08:00

Use box-shadow, this allows you to use one or more borders and if you leave the third value to 0, it doesn't blur but looks like a normal border:

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

Same example as above, but with many, many more borders, the key is that you can separate them by commas and add as many as you want:

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>

In your case it would be, adding a thick line of the same background color to the diamond with box-shadow, before the back shadow and increasing the thickness of the shadow, something like this:

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

This is how it would look in your specific case:

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

Alfredo Cebrián · Answer 2 · 2020-04-25T14:02:49+08:00

you must add two outlines:

outline: 5px solid #CCFF00;
and
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>

inner border in div

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?