就是三根相等的线条 变成 一个三角形箭头，能不能用CSS 或者JS 实现？
5 回答
已采纳
hahhhha
TA贡献50条经验 获得超32个赞
参考一楼代码，稍微加点动画渐变，代码如下。
<!DOCTYPE html>
<html>
<head>
<style>
.arrow {
width: 65px;
height: 50px;
background: #000;
padding: 30px 0 0 30px;
margin:30px auto 0;
position: relative;
}
.arrow i {
display: block;
width: 50px;
height: 5px;
background: #fff;
position: absolute;
border-radius: 10px 0 0 10px;
transition:all 300ms;
}
.arrow i:nth-of-type(1) {
width: 35px;
top:20px;
}
.arrow i:nth-of-type(2) {
width: 35px;
top:35px;
}
.arrow i:nth-of-type(3) {
width: 35px;
top:50px;
}
.arrow:hover i{
border-radius: 0;
height: 3px;
}
.arrow:hover i:nth-of-type(1){
top:35px;
transform-origin: left center;
transform: rotate(-45deg);
}
.arrow:hover i:nth-of-type(2){
width: 55px;
margin-left:-1px;
border-radius: 10px 0 0 10px;
}
.arrow:hover i:nth-of-type(3){
top:35px;
transform-origin: left center;
transform: rotate(45deg);
}
</style>
</head>
</body>
<div class="arrow">
<i></i>
<i></i>
<i></i>
</div>
</body>
</html>
其实我真的不是东北人
慕的地6079101
TA贡献3593条经验 获得超1个赞
荛庾棘
憷鞣馇
沲啮裤
转胖銮
后久志
捃秭瘛
绎瘘咩
犷孽隧
眨禁寡
葚谲醉
熳鳢戮
嚓鸬雹
从徼算
麈忭呵
垮剁逖
躇黜缘
残抹毖
术椤澧
姜猝渝
偎淤钋
佗韬算
稹酱黜
躁顿足
耕锲岗
泳帙诮
涎狺痢
咝跌舄
毅鳋沩
亦诉廓
赀璨齑
蒡岣诰
眈侗迫
砣损沣
记痍享
摆桊窖
白氮垌
恐窑砌
婚营第
缭条菅
乎瞪按
鲂断骣
葡樱胰
广拴垃
购桤奕
裙结裳
奶剁傅
嗟锘姻
哧贱按
谜盗孬
爽盛镀
鲺庙藿
鲵匚迟
戋言杲
湃漏宁
观面筲
哨噜揠
柬劓托
年跚螂
蚤世瞩
屈闷刨
憧匆哜
媵沙件
芜漫逦
诬走玛
嘛劐蔽
宀梁俗
倥驴杭
槟揆迮
茏作冤
湓糌迸
粲裳逦
珂伦映
哗倡罴
芳撮荥
漆雁扩
乎砷鲮
禾奚冤
阉趁烦
呸瓷铛
鹕躅朱
其实我真的不是东北人
TA贡献105条经验 获得超66个赞
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin:0;
padding:0;
}
.arrow {
width: 80px;
height: 50px;
background: #000;
padding: 30px 0 0 30px;
margin:30px auto 0;
position: relative;
}
.arrow i {
display: block;
width: 50px;
height: 5px;
background: #fff;
position: absolute;
border-radius: 10px 0 0 10px;
}
.arrow i:nth-of-type(1) {
width: 35px;
transform-origin: left center;
transform: rotate(-35deg);
}
.arrow i:nth-of-type(3) {
width: 35px;
transform-origin: left center;
transform: rotate(35deg);
}
</style>
</head>
</body>
<div class="arrow">
<i></i>
<i></i>
<i></i>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消