How to create a narrowing chevron in CSS?

问题

This is a chevron :

.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;
}

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

What I basically need to create is this :

How can we stretch the chevron on hover?

回答1:

A slightly different approach: instead of using skew, use rotate + translate:

.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);
}

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

回答2:

Below is another approach to achieve the chevron shape and make it narrower on hover. It uses a skewed parent container and one reverse skewed child.

Note: The other methods cause the hover effect to be triggered even when hovering the white area because the container is a rectangle and its area includes the white portion. The below snippet does not have that problem as here the container itself is skewed.

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);
}

<div></div>

Credits to web-tiki for helping to figure out the initial issue with transitions on the second snippet.

This is an alternate way to achieve the chevron shape and the hover effect.Here the chevron shape is created by using linear-gradients for background. On hover, the gradient angles and positions are modified to produce a narrowing effect.

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%;
}

<div></div>

Below is the original answer which was down-voted (for whatever reason) just in case it is useful for future readers.

The chevron shape is created by using two borders and an element rotated by 45 degrees. On hover, the element is further rotated allow the Y-axis to produce a narrowing effect.

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);
}

<div></div>

回答3:

A very quick mock up of your example would be:

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);
}

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

回答4:

Just skew them by a greater angle on hover.

.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;
}

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

回答5:

Use :hover and increase/decrease skewY:

.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);
}

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

来源：https://stackoverflow.com/questions/28299464/how-to-create-a-narrowing-chevron-in-css

标签

html

css

css3

css-shapes