.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. Windows 10同步时间的方法

    今天在安装了Windows 10 1809(October 2018 update)之后发现时间不能同步,以前并没有出现这种情况. 1) 打开控制面板,找到时钟域地区 2) 选择日期和时间 3) 选择 ...

  2. gitlab 常用维护命令

    GitLab简介 GitLab 是一个用于仓库管理系统的开源项目.使用Git作为代码管理工具,并在此基础上搭建起来的web服务.Github是公共的git仓库,而Gitlab适合于搭建企业内部私有gi ...

  3. c#: WebBrowser控制台输出

    还是处理视频下载所相关的问题. 有些网站,它的页面代码是由页面加载后js动态生成,那么其原始的html便不能用.页面渲染后的代码,是我们需要的 c#中,我用WebBrowser这个控件处理.设置项目类 ...

  4. @RequestBody配合@JsonFormat注解实现字符串自动转换成Date

    2018年08月28日 16:41:15 混合动力火锅 阅读数:440   在controller中使用@RequestBody可以自动将字符串转换成int或者将int转换成字符串,但是Date类型则 ...

  5. MySQL优化(三) 表的设计

    1.什么样的表才符合3范式(3 NF)? 表的范式,是首先符合1范式,才能满足2范式,进一步才能满足3范式:(现在最高级别是6范式) 第一范式:1NF 是对属性的原子性约束,要求表的属性(列)具有原子 ...

  6. pc send instructor pc ad

     1. #include <string.h> #include <intrins.h> // 加入此头文件后,可使用_nop_库函数 #define MAIN_Fosc 11 ...

  7. leveldb 学习记录(六)SSTable:Block操作

    block结构示意图 sstable中Block 头文件如下: class Block { public: // Initialize the block with the specified con ...

  8. AX_Dialog

    Dialog                      dialog  = new Dialog("@SYS1052");  DialogField                 ...

  9. JavaScript 方法

    对象的定义 var xiaoming = { name: '小明', birth: 1990 }; 是,如果我们给xiaoming绑定一个函数,就可以做更多的事情.比如,写个age()方法,返回xia ...

  10. ios Block详解

    一. iOS代码块Block 1.1 概述 代码块Block是苹果在iOS4开始引入的对C语言的扩展,用来实现匿名函数的特性,Block是一种特殊的数据类型,其可以正常定义变量.作为参数.作为返回值, ...