绘制三角形

/// draw triangle
/// @param {type} $type [''] - triangleUp triangleDown triangleLeft triangleRight
/// @param {Size} $border-value-1
/// @param {Size} $border-value-2
/// @param {Size} $border-value-3
/// @param {color} $border-color
/// @require

@mixin draw-triangle($type: '', $border-value-1: 50px , $border-value-2: 50px, $border-color...) {
width: 0;
height: 0;
@if $border-color != '' {
@if $type == 'triangleUp' {
border-left: $border-value-1 solid transparent;
border-right: $border-value-2 solid transparent;
border-bottom: solid $border-color;
}
@if $type == 'triangleDown' {
border-left: $border-value-1 solid transparent;
border-right: $border-value-2 solid transparent;
border-top: solid $border-color;
}
@if $type == 'triangleLeft' {
border-top: $border-value-1 solid transparent;
border-bottom: $border-value-2 solid transparent;
border-right: solid $border-color;
}
@if $type == 'triangleRight' {
border-top: $border-value-1 solid transparent;
border-left: solid $border-color;
border-bottom: $border-value-2 solid transparent;
}
} @else {
border-left: $border-value-1 solid transparent;
border-right: $border-value-2 solid transparent;
border-bottom: solid $border-color;
}
}

绘制三角形(sass)的更多相关文章

  1. 纯CCS绘制三角形箭头图案

    用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码: /* create an arrow that points up */ div.ar ...

  2. unity 绘制三角形

    哎 该学的还是要学 参考:http://www.narkii.com/club/thread-369573-1.html unity 顶点绘制三角形 脚本绘制; 其实filter和render就是进行 ...

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

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

  4. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  5. 【转载】理解GL_TRIANGLE_STRIP等绘制三角形序列的三种方式

    GL_TRIANGLE_STRIP绘制三角形方式很多时候令人疑惑,在这里对其运作机理进行解释. 一般情况下有三种绘制一系列三角形的方式,分别是GL_TRIANGLES.GL_TRIANGLE_STRI ...

  6. CSS - Tooltip-arrow 绘制三角形

    问题:纯CSS实现bubble的三角形部分 方法:使用border来绘制三角形:例如 .trangle { ; border-color: transparent; border-style: sol ...

  7. CSS用border绘制三角形

    使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子 ...

  8. Android OpenGL ES(十)绘制三角形Triangle .

    三角形为OpenGL ES支持的面,同样创建一个DrawTriangle Activity,定义6个顶点使用三种不同模式来绘制三角形: float vertexArray[] = { -0.8f, - ...

  9. Android OpenGL 入门示例----绘制三角形和正方形

    Android上对OpenGl的支持是无缝的,所以才有众多3D效果如此逼真的游戏,在Camera的一些流程中也有用到GLSurfaceView的情况.本文记录OpenGL在Android上的入门级示例 ...

随机推荐

  1. javascript中innerHTML的问题

    获取document.getElementById()时,使用innerHTML获取标签获取内容,要注意: 1.要让内容先加载完,才可以使用,不然获取的是空,使用:window.onload = .. ...

  2. 2015-03-22——js常用其它方法

    Function Function.prototype.method = function (name, func) {    this.prototype[name] = func;  //此时th ...

  3. 阿里巴巴 JAVA 开发手册

    阿里巴巴 JAVA 开发手册 1.0.0 阿里巴巴集团技术部 2016.12.7 首次向 Java 业界公开 一. 编程规约(一) 命名规约1. [强制]所有编程相关命名均不能以下划线或美元符号开始, ...

  4. 我的Android进阶之旅------>解决DownloadManager报错java.lang.SecurityException: Invalid value for visibility: 2

    1.问题描述 今天使用Android系统的DownloadManager进行下载操作时,爆了如下所示的错误: java.lang.RuntimeException: Unable to start s ...

  5. Linux(2)- linux目录结构、shell基本命令

    一.Linux之文档与目录结构 1.Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.Linux没有“盘(如C盘.D盘.E盘)”的概念,而是建立一个根"/&q ...

  6. Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法

    一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...

  7. sql server 中having 的使用注意事项

    1.having 中不能使用未参与分列的组,having 不能替代where 作用不一样,having是对组进行过滤,where是每条记录进行过滤. 2.having 是对Group By 的条件分组 ...

  8. google protobuf使用2

    protobuf mutable_* 函数 从该函数的实现上来看,该函数返回指向该字段的一个指针.同时将该字段置为被设置状态. 若该对象存在,则直接返回该对象,若不存在则新new 一个.

  9. FTP 服务器性能 测试点

    测试FTP 服务器性能测试点: 1. ftp软件性能 2. ftp服务器硬件处理性能(IO/CPU/ROM) 3. ftp服务器网络吞吐性能 (NET IO) 有针对性的测试 达到的效果会比较好. 建 ...

  10. python的垃圾回收机制 继承的顺序C3算法

    Python垃圾回收    -- 引用计数        -- Python为每个对象维护一个引用计数        -- 当引用计数为0的 代表这个对象为垃圾    -- 标记清除        - ...