CODEWITHSUNDEEP
javascripthtmlcss
Umutambyi Gad
Umutambyi Gad

Reputation: 4101

How can I hide short part of div which is inside the container but show another overflow part

Is it possible to hide short part of div which is inside the container but show another left part overflow.

what I'm saying is that you can simply set the overflow to hidden to hide everything that overflow from particular in that case what I want is the reverse of that.

code:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
}

.magnifier {
  position: relative;
  top: 0;
  width: 30%;
  height: 200px;
  background: rgba(230, 230, 230, .1);
  border-radius: 10px;
  margin: 30px;
  box-shadow: inset 1px 0 rgba(225, 225, 225, .1), inset 1px 2px 6px 7px rgba(225, 225, 225, .1);
}

.inside {
  position: absolute;
  top: 50%;
  right: -6px;
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  background: rgba(230, 230, 230, .1);
}
<div class="container">
  <div class="magnifier">
    <div class="inside"></div>
  </div>
</div>

As you can see in the above snippet on the right side of div.magnifier there is div.inside which I want to show only the outside part looks like an arrow but you see that all parts of that div is being shown.

I know that the above issue is unusual when there is no opacity applied but in my case I want it and also the issue is not causing by the inset on box-shadow.

And if there is any different way that I can do it I'll appreciate that.

Upvotes: 2

Views: 169

Answers (2)

Aman Chadha
Aman Chadha

Reputation: 2496

You can use clip-path function to achieve the same. i tried these values and got what i suppose you need. Add this in inside class.

clip-path:polygon(0 0,100% 0 ,100% 100%,90% 100%); 


  * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .container {
      position: absolute;
      width: 100%;
      height: 100%;
      background: #111;
    }

    .magnifier {
      position: relative;
      top: 0;
      width: 30%;
      height: 200px;
      background: rgba(230, 230, 230, .1);
      border-radius: 10px;
      margin: 30px;
      box-shadow: inset 1px 0 rgba(225, 225, 225, .1), inset 1px 2px 6px 7px rgba(225, 225, 225, .1);
    }

    .inside {
      position: absolute;
      top: 50%;
      right: -8px;
      width: 15px;
      height: 15px;
      background: rgba(230, 230, 230, .1);
      transform: rotate(45deg);
     
      clip-path:polygon(0 0,100% 0 ,100% 100%,90% 100%); 
}
    <div class="container">
      <div class="magnifier">
        <div class="inside"></div>
      </div>
    </div>

Upvotes: 2

نور
نور

Reputation: 1527

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
}

.magnifier {
  position: relative;
  top: 0;
  width: 30%;
  height: 200px;
  background: rgba(230, 230, 230, .1);
  border-radius: 10px;
  margin: 30px;
  box-shadow: inset 1px 0 rgba(225, 225, 225, .1), inset 1px 2px 6px 7px rgba(225, 225, 225, .1);
}

.inside {
  position: absolute;
  top: 50%;
  right: -15px;
  width: 15px;
  height: 15px;
  background: rgba(230, 230, 230, .1);
  clip-path: polygon(0 0, 50% 50%, 50% 50%, 0% 100%);
}
<div class="container">
  <div class="magnifier">
    <div class="inside"></div>
  </div>
</div>

Upvotes: 2

Related Questions