Question 291408 in CSS Question posted in
Some basic documentation can be found here.

Css – Transition of clip path – how to change direction?

I am working with clip-path, and have created a box with a cut-off corner. When hovered, it closes up and becomes a full square. What I am interesting in, is it possible to choose the direction it closes? From now it closes bottom-out, but I would like it to close top-down. Is this at all doable?

.shape {
  width: 400px;
  height: 243px;
  background-color: black;
  position: relative;
  transition: all .5s ease-in-out;
}

.shape:before {
  content: '';
  width: 398px;
  height: 241px;
  background: white;
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all .5s ease-in-out;
}

.shape,
.shape:before {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 80%, 80% 100%, 0 100%, 0% 80%, 0% 20%);
  clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 80%, 80% 100%, 0 100%, 0% 80%, 0% 20%);
}

.shape:hover {
  clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
}

.shape:hover:before {
  clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%);
}
<div class="shape"></div>
Tags:

2

Answers


  1. 0

    You have 2 80%, adjust the first one not the second one.

    .shape {
  width: 400px;
  height: 243px;
  background-color: black;
  position: relative;
  transition: all .5s ease-in-out;
}

.shape:before {
  content: '';
  width: 398px;
  height: 241px;
  background: white;
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all .5s ease-in-out;
}

.shape,
.shape:before {                  /* this one -----v */
  clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 80%, 80% 100%, 0 100%);
}

.shape:hover,
.shape:hover:before{
  clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 100%, 80% 100%, 0 100%);
}
    <div class="shape"></div>
    Login or Signup to reply.
  2. 0

    Adjust your clip-path as follows… just swap a few % values.

    .shape {
  width: 400px;
  height: 153px;
  background-color: black;
  position: relative;
  transition: all .5s ease-in-out;
}

.shape:before {
  content: '';
  width: 398px;
  height: 151px;
  background: white;
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: all .5s ease-in-out;
}

.shape,
.shape:before {
  clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 100%, 0 0);
}

.shape:hover {
  clip-path: polygon(100% 0, 100% 100%, 80% 100%, 0 100%, 0 0);
}

.shape:hover:before {
  clip-path: polygon(100% 0, 100% 100%, 80% 100%, 0 100%, 0 0);
}
    <div class="shape"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search