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 ...
随机推荐
- 前端---js02
主要内容 1.数组 2.字符串 3.Date日期对象 4.内置对象 5.定时器 6.DOM 7.伪数组 内置对象: 1 数组(列表) Array (1) 数组的创建 <script>//字 ...
- C语言-第2次作业得分
作业链接:https://edu.cnblogs.com/campus/hljkj/CS20180的2/homework/2292 作业链接:https://edu.cnblogs.com/campu ...
- 支持pc和移动端的手写签批功能
由于之前的业务需要,要求在pc端(用鼠标写字).移动端(手写)实现会签功能,然后百度下载了个签字插件,经过一些修改和功能添加,实现了现有的功能插件,效果如图: 代码下载地址:https://githu ...
- 记一次网络原因导致的mysql连接中断问题(druid)
date: 2018-04-19 21:00 tag: java,mysql,exception,mat,调试,jvm 工具: gceasy.io, MAT 线上系统出现一个诡异的bug,通过heap ...
- socket端口绑定后通过bat干掉
@echo off::port为需要去绑定端口set port=8888for /f "tokens=5 delims= " %%a in ('netstat -ano ^|fin ...
- spring-aop思想实践demo
需求: 例如我们需要有一个类中每个方法执行前都需要做一个权限校验,必须是有特定权限的账号才能完成该方法的操作. 解决方案: 1.使用父类继承方式,书写该类的父类,然后在父类中定义一个checkPri的 ...
- SOFARPC —— Generic Service (泛化调用) 解析
今晚心情无比激动,多云转晴!原因在于弄懂些 Generic Service 实现原理,很有成就感. 各位看官莫笑,今晚,小小的收获,也是非常满足的.下面进入正题! 一.前言 普遍RPC在客户端需要提供 ...
- js练习
/** * Created by bianxiaoling on 2018/9/7. */ // 获取 url 中的参数 // 1. 指定参数名称,返回该参数的值 或者 空字符串 // 2. 不指定参 ...
- 前端基础:canvas概述
1:并不是所有的浏览器都支持canvas,若是不支持则浏览器会弹出 <canvas>Update your browser to enjoy canvas</canvas> 浏 ...
- WPF-MVVM-ICommand接口实现
一 接口分析MVVM框架的目的就是让视图和业务逻辑分离,各干各的.那么怎样实现分离呢,精髓就是绑定ICommand.先看一下ICommand接口的定义: // // 摘要: // 定义一个命令. [T ...