.triangle {
position: relative;
&:after {
position: absolute;
top: 50%;
transform: translate(0,-50%);
right:;
content: '';
display: block;
width:;
height:;
background: transparent;
border: 10px solid transparent;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: #0f0;
}
}

纯css实现不同方向的三角形的更多相关文章

  1. 纯CSS实现小圆点和三角形图案

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 还在为小三角形切图?使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  3. 通过CSS实现各种方向的三角形

    #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid tr ...

  4. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  5. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  6. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  7. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. 三角形变形记之纯css实现的分布导航条效果

    三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...

  9. 纯 CSS 创建一个三角形

    [要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...

随机推荐

  1. JAVA数据库连接池C3p0 以及阿里Druid提供的连接池

    一:连接池的定义 本质上就是个容器(集合) 存放数据库连接的容器,当系统初始化后,容器被创建,容器中就会申请一些连接对象,当用户来访问数据库的时候,从容器中取连接对象,用户用完之后,归还. 二:常用的 ...

  2. 186. Reverse Words in a String II 翻转有空格的单词串 里面不变

    [抄题]: Given an input string , reverse the string word by word. Example: Input: ["t"," ...

  3. 记录一次Centos磁盘空间占满的解决办法(转)

    原文地址:https://blog.csdn.net/everything1209/article/details/70209157 解决前 磁盘使用情况: 第二块磁盘使用率达到97% [root@f ...

  4. git回滚远程仓库

    关于远程仓库回滚 首先,必须要明白的一件事,任何普通用户不能擅自做有关远程仓库回退的操作,如果你擅自回滚了远程仓库,会对项目团队其他人造成不可预知的影响.如果需要回退版本,先联系项目的仓库管理员,在团 ...

  5. cookie和session 以及Django中应用

    cookie和session 以及Django中应用   cookie和session机制 cookie和session机制 cookie机制采用的是在客户端保持状态的方案.作用就是为了解决HTTP协 ...

  6. git连接远程客户端,命令行窗口上传文件

    1.git官网,下载安装git客户端 2.配置全局的name和email,生成key git config --global user.name  XXX git config --global us ...

  7. Robot Framework浏览器驱动下载

    运行robot framework 有时打不开浏览器,可能用到的驱动不对,以下是各浏览器驱动下载,仅供参考!~ 各浏览器下载地址: Firefox浏览器驱动:geckodriver    https: ...

  8. BZOJ4381 : [POI2015]Odwiedziny / Luogu3591[POI2015]ODW - 分块+树剖

    Solution 在步伐$pace$比较小的时候, 我们发现用前缀和直接维护会很快 而在$pace$比较大的时候, 则暴力往上跳会最优 设$blo= \sqrt{N}$ 若$pace<=blo$ ...

  9. CentOS6.5在虚拟机中安装

    只有一点,先建虚拟机,再选择iso镜像安装,注意,安装路径不能有中文空格之类的. CentOS6.5 64位下载链接 链接:https://pan.baidu.com/s/1d6zp5LtKtkL8I ...

  10. boost asio 学习(五) 错误处理

    http://www.gamedev.net/blog/950/entry-2249317-a-guide-to-getting-started-with-boostasio?pg=6 5. Erro ...