CSS如何使用倾斜过渡为角度线设置动画

Question

我希望将一条正在划分的线条分成2个向上和向下扩展45度的线条。这是CODEPEN。

CSS：

.connector {
   height: 40px;
   width: 200px;
   border-bottom: 2px solid red;
   border-right: 2px solid red;
   -moz-transform: skew(-45deg);
   -webkit-transform: skew(-45deg);
   transform: skew(-45deg);
}

Answer 1

这样可行：

.connector {
  position: relative;
  margin: 100px;
  width: 100px;
  height: 2px;
  background: #f00;
}

.connector:before,
.connector:after {
  position: absolute;
  left: 100%;
  top: 0;
  content: '';
  width: 100px;
  height: 2px;
  background: #f00;
  transform-origin: 0 100%;
  transform: rotate(-45deg);
}

.connector:after {
  transform: rotate(45deg);
}

<div class="connector"></div>

这是一个动画版本：

.connector {
  position: relative;
  margin: 100px;
  width: 0;
  height: 2px;
  background: #f00;
  animation: draw 1s linear;
  animation-fill-mode: forwards;
}

.up,
.down {
  position: absolute;
  left: 100%;
  top: 0;
  content: '';
  width: 0;
  height: 2px;
  background: #f00;
  transform-origin: 0 100%;
  transform: rotate(-45deg);
  animation: draw 1s linear;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.down {
  transform: rotate(45deg);
}

@keyframes draw {
  0% {
    width: 0px;
  }
  100% {
    width: 100px;
  }
}

<div class="connector">
  <div class="up"></div>
  <div class="down"></div>
</div>

Answer 2

我不知道我是否理解你想要的东西。但是，这个怎么样？

https://codepen.io/pablodarde/pen/qPexVX

<强> HTML

<div class="connector up"></div>
<div class="connector down"></div>

<强> CSS

.connector {
  height: 40px;
  width: 200px;
  border-right: 2px solid red;
}

.up {
  border-bottom: 2px solid red;
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
  transform: skew(-45deg);
}

.down {
  -moz-transform: skew(45deg);
  -webkit-transform: skew(45deg);
  transform: skew(45deg);
}

在这里，我的动画版......

<强> HTML

<div class="container">
  <div class="connector up"></div>
  <div class="connector down"></div>
</div>

<强> CSS

.container {
  width: 0;
  height: 80px;
  overflow: hidden;
  transition: all 2s ease;
}

.animate {
  width: 220px;
}

.connector {
  height: 40px;
  width: 200px;
  border-right: 2px solid red;
  box-sizing: border-box;
}

.up {
  border-bottom: 2px solid red;
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
  transform: skew(-45deg);
}

.down {
  -moz-transform: skew(45deg);
  -webkit-transform: skew(45deg);
  transform: skew(45deg);
}

<强>的JavaScript

document.querySelector('.container').classList.add('animate');

＆＃13;

＆＃13;

setTimeout(function() {
  document.querySelector('.container').classList.add('animate');
}, 500);

＆＃13;

.container {
  width: 0;
  height: 80px;
  overflow: hidden;
  transition: all 2s ease;
}

.animate {
  width: 220px;
}

.connector {
  height: 40px;
  width: 200px;
  border-right: 2px solid red;
  box-sizing: border-box;
}

.up {
  border-bottom: 2px solid red;
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
  transform: skew(-45deg);
}

.down {
  -moz-transform: skew(45deg);
  -webkit-transform: skew(45deg);
  transform: skew(45deg);
}

＆＃13;

<div class="container">
  <div class="connector up"></div>
  <div class="connector down"></div>
</div>

＆＃13;

＆＃13;

＆＃13;