CSS | Inside edge in div

Question

CSS | Inside edge in div

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

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

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

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

css

asked by Jheyman Mejia 24.04.2018 в 23:21

source

2 answers

0

you must add two outline:

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>

answered by 25.04.2018 в 00:02

Styles bar and text format in QTextEdit [closed] Detect that a record to be deleted does not exist in the SQL table (MySQL)

score 1 · Accepted Answer

Use box-shadow, this allows you to use one or more edges and if you leave the third value at 0, it does not blur but instead 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 above, but with many, many more edges, 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 with box-shadow to the diamond a thick line of the same background color, before the back shadow and increase 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 be 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>