CODEWITHSUNDEEP
htmlcss
Robin
Robin

Reputation: 5427

CSS - Set child width greater than parent's width with absolute position

I'm designing a listing item, everything works fine but facing a problem to set the width of child greater than parent's width with absolute positioning. Here is the code I have ever done

.container {
  margin: 5rem;
}

.listing {
  width: 50px;
  height: 50px;
  background-color: #333C83;
  clip-path: polygon(25% 5%, 100% 0%, 75% 95%, 0% 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #0A0D1E;
  display: flex;
  justify-content: center;
  align-items: center;
}
.secondaryCircle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #FABC42;
  position: relative;
}

.line {
  height: 5px;
  background-color: #FABC42;
  width: 40px;
  position: absolute;
  top: 4.5px;
  left: 14px;
}
<div class="container">
  <div class="listing">
    <div class="circle">
      <div class="secondaryCircle">
        <div class="line"></div>
      </div>
    </div>
  </div>
</div>

As you can see, line isn't visible with the width of 40px. How can I fix this ?

Here is the output I wanted to

enter image description here

Upvotes: 1

Views: 67

Answers (1)

laurence keith albano
laurence keith albano

Reputation: 1482

This is because of this css in the .listing class

    .listing { clip-path: polygon(25% 5%, 100% 0%, 75% 95%, 0% 100%); }

It tends to crop out edges of your boxes. Try to use transform:skew to achieve that particular goal you want to have..

I've provided an example. Feel free to adjust it on your end.

.container {
  margin: 5rem;
}

.listing {
  width: 40px;
  height: 50px;
  background-color: #333C83;
  transform: skewY(-12deg);
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #0A0D1E;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: skewY(12deg);
}
.secondaryCircle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #FABC42;
  position: relative;
}

.line {
  height: 5px;
  background-color: #FABC42;
  width: 40px;
  position: absolute;
  top: 4.5px;
  left: 14px;
}
<div class="container">
  <div class="listing">
    <div class="circle">
      <div class="secondaryCircle">
        <div class="line"></div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions