CSS画三角形图标
/* 等腰三角形(箭头朝上); */
#div1{
width: 0;
height: 0;
border-bottom: 100px solid cyan;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
/* 等腰三角形(箭头朝下); */
#div2{
width: 0;
height: 0;
border-top: 100px solid cyan;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
/* 等腰三角形(箭头朝左); */
#div3{
width: 0;
height: 0;
border-right: 100px solid cyan;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
/* 等腰三角形(箭头朝右); */
#div4{
width: 0;
height: 0;
border-left: 100px solid cyan;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
/* 直角三角形(箭头左上); */
#div5{
width: 0;
height: 0;
border: 50px solid gray;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
}
/* 直角三角形(箭头右下); */
#div6{
width: 0;
height: 0;
border: 50px solid lightblue;
border-left: 50px solid transparent;
border-top: 50px solid transparent;
}
CSS画三角形图标的更多相关文章
- CSS实现三角形图标原理解析
CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框 ...
- css画三角形原理解析
<div id="div1"></div><div id="div2"></div><div id=&qu ...
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
- CSS画三角形引发的一些思考
今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
- CSS实现三角形图标的原理《转载》
网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了) 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实 ...
- CSS实现三角形图标的原理!!!!今天总算弄懂了。
网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了) 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实 ...
- HTML 和 CSS 画三角形和画多边行基本原理及实践
基本 HTML 标签 <div class = 'test'></div> 基本 CSS 代码 .test { width: 100px; height: 100px; bac ...
- 纯css做三角形图标
以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...
随机推荐
- Linux 学习之路 --------ip地址虚拟网络
// ifconfig 查看IP地址 网络信息 我的IP 39.161.136.25 ① 为网卡临时配置IP地址 ifconfig eth0 39.161.136.5 (netmask ...
- 禁止用su切换到root
http://jie388.blog.51cto.com/1433454/920492
- linux压缩、解压缩和归档工具
linux基础之压缩.解压缩和归档工具 1.压缩工具 基本介绍 为了减少文件的原来的文件大小而过多的浪费磁盘的存储空间,我们使用压缩后多文件进行存储 压缩工具的介绍 compress:把文件压缩成以. ...
- 取MySQL结果集的第一条记录
select * FROM SU_supplycontract t WHERE supplyContractCode="CRM20180813002" limit 1;
- 前端导出功能get和post两种方式
get方式: var url = ’/sjdd/eventQuery/exportSuperviseEventExcel.do?beginDate=' + beginDate + '&endD ...
- xshell 使用命令上传、下载文件
打开xshell, ①检查是否已经安装了上传下载的命令,#rpm -qa |grep lrzsz [root@mjy logs]# rpm -qa |grep lrzszlrzsz-0.12.20-2 ...
- 基于C++的牛顿切线法演示
牛顿切线法 中心思想: 利用目标函数二阶泰勒多项式的最优解作为函数的近似最优解.如果新的近似最优解满足计算精度,则终止计算,否则将函数在新点展开成二阶泰勒多项式,用新的泰勒多项式的最优解作为函数的近似 ...
- 面向对象A 知识点总结
- python获取机器信息脚本(网上寻找的)
获取机器信息(待测试) # -*- coding: UTF-8 -*- import psutil import json import os import socket import struct ...
- 《我的嵌入式开发》---- IIC 通信
IIC 通用文件,文件是在NRF51xx 芯片基础,keil 平台开发测试通过,后期修改为STM32F2xx系列的配置. 文件百度云盘链接 : https://pan.baidu.com/s/1AFx ...