Question 168490 in Html Question posted in
Some basic documentation can be found here.

Why isn’t the HTML box showing?

I am trying to place my bubble(blob) into a box with a red border and 500 pixels in size but unable to do so, please help me understand where my red box has been misplaced in the style sheet

.box {
  border: 500px red;
}

.blob {
  height: 150px;
  width: 150px;
  border-radius: 58% 43% 33% 64%/50% 38% 53% 50%;
  background: transparent;
  box-shadow: inset 6px 33px 20px 0px #800080, inset 20px 80px 15px 0px #Ffff00, 10px 20px 20px 0px #c9c9c9;
}

.blob::before {
  content: 'abc';
  position: absolute;
  border-radius: 37% 54% 46% 46%;
  background: white;
  width: 50px;
  transform: rotate(-30deg);
  height: 15px;
  top: 20px;
  left: 20px;
}

.blob::after {
  content: 'def';
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 10px;
  height: 10px;
  top: 60px;
  left: 20px;
}
<div class="box">
  <div class="blob"></div>
</div>

credit:@NanouuSymeon(twitter)

Tags:

2

Answers


  1. 0

    Your border property is missing solid like so:

    border: 500px solid red;

    However, with a border this thick, your bubble is engulfed. The below snippet shows with a border of 1px

    .box {
  border: 1px solid red;
}

.blob {
  height: 150px;
  width: 150px;
  border-radius: 58% 43% 33% 64%/50% 38% 53% 50%;
  background: transparent;
  box-shadow: inset 6px 33px 20px 0px #800080, inset 20px 80px 15px 0px #Ffff00, 10px 20px 20px 0px #c9c9c9;
}

.blob::before {
  content: 'abc';
  position: absolute;
  border-radius: 37% 54% 46% 46%;
  background: white;
  width: 50px;
  transform: rotate(-30deg);
  height: 15px;
  top: 20px;
  left: 20px;
}

.blob::after {
  content: 'def';
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 10px;
  height: 10px;
  top: 60px;
  left: 20px;
}
    <div class="box">
  <div class="blob"></div>
</div>
    Login or Signup to reply.
  2. 0

    Your question is a bit unclear: "box with 500px size": 500px what – width, height? In my snippet below I set it to 500px width and height and defined the red border solid and 1px wide. Adopt that to your needs…

    To center the contents inside it, you can add flex-settings as done below. In that case, also add position: relative; to .blob to make it the position reference for your absolutely positioned pseudo-elements.

    .box {
  border: 1px solid red;
  height: 500px;
  width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blob {
  height: 150px;
  width: 150px;
  border-radius: 58% 43% 33% 64%/50% 38% 53% 50%;
  background: transparent;
  box-shadow: inset 6px 33px 20px 0px #800080, inset 20px 80px 15px 0px #Ffff00, 10px 20px 20px 0px #c9c9c9;
  position: relative;
}

.blob::before {
  content: 'abc';
  position: absolute;
  border-radius: 37% 54% 46% 46%;
  background: white;
  width: 50px;
  transform: rotate(-30deg);
  height: 15px;
  top: 20px;
  left: 20px;
}

.blob::after {
  content: 'def';
  position: absolute;
  border-radius: 50%;
  background: white;
  width: 10px;
  height: 10px;
  top: 60px;
  left: 20px;
}
    <div class="box">
  <div class="blob"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search