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

Html – How to fold the corner of paper in div?

I need to do a fold corner of the paper in div.
I’ve read many websites but I’m still confuse how to do it . .

what i got
this is what i got

this is my code

<div style="max-width: 700px; height: auto; background-color: #fff;">
<div style="max-width: 50px; height: 50px; background-color: transparent; border-width: 0 20px 20px 0; border-style: solid; border-color: #A6A49D #fff;">
</div></div>

what i need
this is what i want

Tags:

2

Answers


  1. 0

    You may looking something like this. Modify according to your needs if necessary.

    .card {
  height: 350px;
  width: 350px;
  background-color: #8C46C8;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 0px 0px 70px 70px;
    border-bottom-right-radius: 15px;
    
    border-top-color: #521A80;
    border-bottom-color: #521A80;
  }
}
    <div class='card'></div>
    Login or Signup to reply.
  2. 0

    i found this for your problem:

    .page-flip {
    height: 400px;
  padding: 25px 25px;
  position: relative;
  font-size: 90%;
  text-decoration: none;
  color: #999; 
  background: #fff;
  transition: all ease .5s;
  border:5px solid #999;
}
.page-flip:before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 100px 100px 0;
  border-color: #ddd black;
  transition: all ease .5s;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search