CODEWITHSUNDEEP
csshtmlclip
Bhanu
Bhanu

Reputation: 351

div clip path according to the parent rectangle

I am trying to clip this strap into the parent rectangle.
Image-
enter image description here

HTML CODE:

<div class="pricing_plan ultimate">
    <div class="strap">
        <P>RECOMMENDED</P>
    </div>
    <div class="p_name">
        <p>Ultimate</p>
    </div>
    <div class="p_plan">
        <p><strike>&#8377; 2388</strike></p>
        <h3>&#8377; 1,099</h3>
        <p>Save 53%</p>
    </div>
    <div class="p_duration">
        <p>12 Months</p>
        <p>356 Days</p>
    </div>
    <a href="">
        <button class="pricing_button ultimate">BUY</button>
    </a>
</div>

CSS

.s2 .pricing_plans .ultimate .strap{
    position: relative;
    top:  -13px;
    right: 65px;
    transform: rotate(-35deg);
    clip-path: inset(0px 50px 50px 0px); 
}



.s2 .pricing_plans .ultimate .strap p{
    background-color: white;
    font-size: 10px;
    color: #3499E0;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
}

How can I clip it into the rectangle so that it doesn't flow outside. I have tried overflow: hidden it doesn't seem to work.

What is the best method to it, so that it is best for a responsive design?

Upvotes: 2

Views: 1311

Answers (1)

R&#233;mi M.
R&#233;mi M.

Reputation: 337

You have to use position:relative with the parent bloc, and position:absolute with the child bloc :

.bloc{
  background: red;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 300px;
}

.bloc .label{
  position: absolute;
  top: 15px;
  left: -20px;
  width: 120px;
  height: 20px;
  background: black;
  color: #fff;
  text-align: center;
  transform: rotate(-35deg);
}
<div class="bloc">
  <div class="label">
    Label here
  </div>
</div>

Upvotes: 3

Related Questions