css画三角形「建议收藏」

css画三角形「建议收藏」实现原理将div的高和宽设置为0,然后设置四个border不同的颜色。效果如下:div#triangle{width:0;height:0;border-top:50pxsolidblue;border-right:50pxsolidred;border-bottom:50pxsolidgreen;bord…

大家好,又见面了,我是你们的朋友全栈君。

实现原理

将div的高和宽设置为0,然后设置四个border不同的颜色。效果如下:

div#triangle{
    width: 0;
    height: 0;
    border-top: 50px solid blue;
    border-right: 50px solid red;
    border-bottom: 50px solid green;
    border-left: 50px solid yellow;
    }

css画三角形「建议收藏」

若我们只想要一个三角形,可以把其他三个三角形的颜色变白,那就只剩下一个。css中有这样一个属性,transparent,背景透明。这样便可以达到我们的目的了。

border的两倍为三角形的底,border-bottom为三角形的高。

例子如下:

div#triangle01{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 50px solid blue;
    }

 

DEMO

——鼠标经过链接左边出现三角形

css样式

li{list-style: none;}
a{text-decoration: none;}
#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;}
a:hover{ color:#FF0000;}
#nav a span{border:6px solid #FFFFCC; height:0px; width:0px; 
 margin:2px 2px 0 -10px; position:absolute;
} 
#nav a:hover span{border-left:6px solid #FF3300;}

html代码

<div id="nav">
  <ul>
    <li><a href=""><span></span>测试文字测试文字</a></li>
    <li><a href=""><span></span>测试文字测试文字</a></li>
    <li><a href=""><span></span>测试文字测试文字</a></li>
    <li><a href=""><span></span>测试文字测试文字</a></li>
    <li><a href=""><span></span>测试文字测试文字</a></li>
  </ul>
</div>

——鼠标经过三角形旋转

#box {
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-top-color: red;
    border-bottom: none;
    transition: all 1s ease 0s;/*all是所有属性都将获得动画效果  1秒玩完成动画 ease(逐渐变慢)*/
}
#box:hover{
    transform: rotate(180deg);/*旋转180度*/
}
<div id="box"></div>

参考文献:

1.如何用css画三角形

2.DIV+CSS 列表超链接前小三角的做法与使用

3.css空心三角形

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/147439.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Linux解压文件到指定目录

    Linux解压文件到指定目录tar在Linux上是常用的打包、压缩、加压缩工具,他的参数很多,折里仅仅列举常用的压缩与解压缩参数参数:-c:create建立压缩档案的参数;-x:解压缩压缩档案的参数;-z:是否需要用gzip压缩;-v:压缩的过程中显示档案;-f:置顶文档名,在f后面立即接文件名,不能再加参数举例:一,将整个/home/www/images目录下的文件全

  • 超全MyBatis动态SQL详解!( 看完SQL爽多了)

    超全MyBatis动态SQL详解!( 看完SQL爽多了)MyBatis令人喜欢的一大特性就是动态SQL。在使用JDBC的过程中,根据条件进行SQL的拼接是很麻烦且很容易出错的。MyBatis动态SQL的出现,解决了这个麻烦。MyBatis通过OGNL来进行动态SQL的使用的。目前,动态SQL支持以下几种标签:1数据准备为了后面的演示,创建了一个Maven项目mybatis-dynamic,创建了对…

  • QTreeWidget 遍历所有子节点(QTreeWidgetItem)[通俗易懂]

    QTreeWidget 遍历所有子节点(QTreeWidgetItem)[通俗易懂]这恐怕是最简单的写法了,逛论坛发现的,亲测好用//ui文件中定义//QTreeWidget*treeWidget;//…//遍历treeWidgetQTreeWidgetItemIteratorit(ui.treeWidget);while(*it){//dosomethinglike…

  • 计算机能不能升级固态硬盘,老电脑升级固态硬盘真的能变快吗?「建议收藏」

    计算机能不能升级固态硬盘,老电脑升级固态硬盘真的能变快吗?「建议收藏」怎样去DIY一台主机呢?它可以满足自己的工作、游戏需求,还要颜值高、噪音小、最重要的是价格要便宜,质量要好。本系列为让装机零基础的朋友可以轻松了解,所以尽量避免专业参数。(每周二更新)老电脑升级固态硬盘是第一选择,然而很多同学购买了固态硬盘,却发现没有想象的那么快,用测速工具测试后发现读写速度不能达到标称,是买到假货了吗?其实不然,固态硬盘读写速度受很多因素影响,本期《装机不求人》就和大家讲解…

  • oracle数据库recover和restore的区别

    oracle数据库recover和restore的区别

  • Mysql锁死解决「建议收藏」

    Mysql锁死解决「建议收藏」经常遇到mysql锁死,如alterxx语句就经常锁死数据表怎么解决?1.showprocesslist;可以看到有Waitingfortablemetadatalock字眼;如果有其他类似字眼可以解决掉冲突的进程命令:killpidpid就是图片第一列的id,如果还是无法解决且看第二条2.select*frominformation_schema.innodb_trx;此条即查到未结束的事务,可以酌情杀死冲突事务一般都可解决锁死。如未解决可谨慎

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号