如何在CSS中创建变窄的V形? [英] How to create a narrowing chevron in CSS?
本文介绍了如何在CSS中创建变窄的V形?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是人字形:
.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?
推荐答案
不同的方法:使用旋转+翻译而不是使用偏斜:
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>
这篇关于如何在CSS中创建变窄的V形?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文