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

user_13536893 0
Viewed 151

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.

css html javascript
2 Answers

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>

user_142252990 

* {
  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>

user_115543260
Related