css设置三角形以及三角形的旋转

最新推荐文章于 2024-04-28 19:06:45 发布

枕頭說他不想醒

最新推荐文章于 2024-04-28 19:06:45 发布

阅读量1.1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： css 文章标签：大数据

本文链接：https://blog.youkuaiyun.com/weixin_52984349/article/details/125781391

css 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何使用CSS来创建动态旋转的三角形和箭头。通过设置边框颜色、宽度和透明度，结合transform属性实现旋转效果，为用户界面添加交互性。同时，展示了鼠标悬停时的过渡动画，使元素在视觉上更具吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、三角形

代码展示:

.box {
    margin: 100px auto;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    /*三角形宽10px 边框为透明*/
    border-top-color: green;
    /*顶部边框为绿色*/
    border-bottom: none;
    /*底部去掉边框*/
    transition: all 0.5s ease 0s;
    /*设置动画效果  0.5秒完成动画 ease(逐渐变慢)*/
}
/*设置hover效果*/
.box:hover {
    transform: rotate(180deg);/*旋转180度 */
}

效果图展示：

鼠标未触碰：

鼠标触碰后

二、三角箭头

代码展示

.box2 {
    margin: 150px auto;
    width: 5px;
    height: 5px;
    border-top: 3px solid red; 
    /* 上箭头颜色 */
    border-right: 3px solid red;
    /* 右箭头颜色 */
    transform: rotate(135deg);
    /*旋转135度*/
    transition: all 0.5s ease 0s;
    /*设置动画效果  0.5秒完成动画 ease(逐渐变慢)*/
}
.box2:hover {
    transform: rotate(-45deg);/* 逆旋转180度 */
 
}

图片展示：

鼠标未触碰

鼠标触碰后