如何在CSS中创建一个缩小的V形？

Question

这是一个雪佛龙：

＆＃13;

＆＃13;

.shape {
    height: 200px;
    width: 300px;
    position: absolute;
    overflow: hidden;
}
.shape:before, .shape:after {
    content: "";
    position: absolute;
    width: 150px;
    height: 120px;
    background: red;
    top: 10px;
}
.shape:before {
    transform-origin: 0% 100%;
    transform: skewY(20deg);
}
.shape:after {
    transform-origin: 100% 100%;
    transform: skewY(-20deg);
    right: 0;
}

＆＃13;

<div class="shape"></div>

＆＃13;

＆＃13;

＆＃13;

我基本上需要创建的是：

我们如何在悬停时拉伸雪佛龙？

Answer 1

略有不同的方法：使用rotate + translate：

而不是使用倾斜

＆＃13;

＆＃13;

.shape {
    height: 200px;
    width: 260px;
    position: absolute;
    overflow: hidden;
}
.shape::before, .shape::after {
    border-radius: 20px;
    content: "";
    position: absolute;
    width: 150px;
    height: 40px;
    background: red;
    top: 50%;
    transition: all .25s ease-in-out;
}
.shape::before {
    transform-origin: 50% 50%;
    transform: rotate(20deg);
}
.shape::after {
    transform-origin: 50% 50%;
    transform: rotate(-20deg);
    right: 0;
}
.shape:hover::before {
    transform: translateX(15px) rotate(45deg);
}
.shape:hover::after {
    transform: translateX(-15px) rotate(-45deg);
}

＆＃13;

<div class="shape"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

下面是另一种实现人字形并使其在悬停时更窄的方法。它使用一个倾斜的父容器和一个反向倾斜的孩子。

  

注意：即使悬停白色区域，其他方法也会导致hover效果被触发，因为容器是一个矩形，其区域包含白色部分。下面的代码片段没有这个问题，因为容器本身是倾斜的。

＆＃13;

＆＃13;

div {
  height: 120px;
  width: 150px;
  background: red;
  position: relative;
  -webkit-transform: skewY(10deg);
  -moz-transform: skewY(10deg);
  transform: skewY(10deg);
  -webkit-transform-origin: left;
  -moz-transform-origin: left;
  transform-origin: left;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  transition: transform 1s;
}
div:after {
  content: '';
  position: absolute;
  right: -150px;
  height: 120px;
  width: 150px;
  background: red;
  -webkit-transform: skewY(-10deg) skewY(-10deg);
  -moz-transform: skewY(-10deg) skewY(-10deg);
  transform: skewY(-10deg) skewY(-10deg);
  -webkit-transform-origin: left;
  -moz-transform-origin: left;
  transform-origin: left;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  transition: transform 1s;  
}
div:hover {
  -webkit-transform: skewY(20deg);
  -moz-transform: skewY(20deg);
  transform: skewY(20deg);
}
div:hover:after {
  -webkit-transform: skewY(-20deg) skewY(-20deg);
  -moz-transform: skewY(-20deg) skewY(-20deg);
  transform: skewY(-20deg) skewY(-20deg);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

  

致web-tiki致信，以帮助找出第二个代码段转换的初始问题。

---

这是实现人字形和悬停效果的另一种方式。这里通过使用线性渐变为背景创建人字形。在悬停时，会修改渐变角度和位置以产生缩小效果。

＆＃13;

＆＃13;

div{
    height: 200px;
    width: 300px;
    background: -webkit-linear-gradient(70deg, white 30%, red 30%, red 70%, white 70%), -webkit-linear-gradient(-70deg, white 30%, red 30%, red 70%, white 70%);
    background: -moz-linear-gradient(20deg, white 30%, red 30%, red 70%, white 70%), -moz-linear-gradient(-20deg, white 30%, red 30%, red 70%, white 70%);
    background: linear-gradient(20deg, white 30%, red 30%, red 70%, white 70%), linear-gradient(-20deg, white 30%, red 30%, red 70%, white 70%);
    background-size:50% 100%, 50% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: 0% -22px, 100% -22px;
}
div:hover{
    background: -webkit-linear-gradient(60deg, white 30%, red 30%, red 70%, white 70%), -webkit-linear-gradient(-60deg, white 30%, red 30%, red 70%, white 70%);    
    background: -moz-linear-gradient(30deg, white 30%, red 30%, red 70%, white 70%), -moz-linear-gradient(-30deg, white 30%, red 30%, red 70%, white 70%);
    background: linear-gradient(30deg, white 30%, red 30%, red 70%, white 70%), linear-gradient(-30deg, white 30%, red 30%, red 70%, white 70%);
    background-size:50% 100%, 50% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: 0% 0%, 100% 0%;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

---

  

以下是原始答案，如果它对未来的读者有用，则会被投票（无论出于何种原因）。

通过使用两个边框和旋转45度的元素来创建V形。在悬停时，元素进一步旋转，允许Y轴产生变窄效果。

＆＃13;

＆＃13;

div {
  height: 20px;
  width: 20px;
  border-top: 4px solid red;
  border-right: 4px solid red;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg);
}
div:hover {
  border-top: 5px solid red;
  border-right: 5px solid red;
  -webkit-transform: rotateY(55deg) rotate(135deg);
  -moz-transform: rotateY(55deg) rotate(135deg);
  transform: rotateY(55deg) rotate(135deg);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

非常快速模拟您的示例：

＆＃13;

＆＃13;

div {
  display: inline-block;
}
.wrap {
  height: 200px;
  width: 120px;
  position: relative;
  overflow: hidden;
  transform: rotate(90deg);
  margin: 50px;

}
.top,
.bottom {
  left: 10px;
    transition:all 0.8s;
}
.top {
  position: absolute;
  border-bottom: 200px solid red;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  top: -41%;
  transform: rotate(-30deg);
}
.bottom {
  position: absolute;
  border-top: 200px solid red;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  bottom: -41%;
  transform: rotate(30deg);
}
.wrap:hover .top,
.wrap:hover .bottom {
  left: 30px;
}
.wrap:hover .top {
  transform: rotate(-40deg);
  top: -35%;
}
.wrap:hover .bottom {
  bottom: -35%;
  transform: rotate(40deg);
}

＆＃13;

<div class="wrap">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

在悬停时将它们倾斜一个更大的角度。

＆＃13;

＆＃13;

.shape {
    height: 200px;
    width: 300px;
    position: absolute;
    overflow: hidden;
}
.shape:before, .shape:after {
    content: "";
    position: absolute;
    width: 150px;
    height: 120px;
    background: red;
    top: 10px;
}
.shape:before {
    transform-origin: 0% 100%;
    transform: skewY(20deg);
}
.shape:after {
    transform-origin: 100% 100%;
    transform: skewY(-20deg);
    right: 0;
}
.shape:hover {
    height: 230px;
}
.shape:hover:before {
    transform: skewY(30deg);
}
.shape:hover:after {
    transform: skewY(-30deg);
}
.shape, .shape:before, .shape:after, .shape:hover, .shape:hover:before, .shape:hover:after {
    transition: 0.5s ease all;
}

＆＃13;

<div class="shape"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

使用:hover并增加/减少skewY：

＆＃13;

＆＃13;

.shape {
    height: 200px;
    width: 300px;
    position: absolute;
    overflow: hidden;
}
.shape:before, .shape:after {
    content: "";
    position: absolute;
    width: 50%;
    height: 120px;
    background: red;
    top: 10px;
}
.shape:before {
    transform-origin: 0% 100%;
    transform: skewY(20deg);
}
.shape:after {
    transform-origin: 100% 100%;
    transform: skewY(-20deg);
    right: 0;
}
.shape:hover {
    height: 220px;
    width: 250px;
}
.shape:hover:after {
    transform: skewY(-40deg);
}
.shape:hover:before {
    transform: skewY(40deg);
}

＆＃13;

<div class="shape"></div>

＆＃13;

＆＃13;

＆＃13;