绘制三角形

/// 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. DPM Server切换

    DPMserver切换: Dpm有2个volum:副本卷和恢复点卷 (1)首先在exchangeserver上面安装agent (2)在exchangeserver上指定dpmserver: cd&q ...

  2. SQL 将列转成字符串并用逗号分隔

    SELECT STUFF((SELECT ',' + FieldName FROM TableName FOR XML PATH('')),1,1,'') AS T 其中的逗号可以换成其它字符 转换完 ...

  3. 学习笔记のsendRedirect &forward

    尽管HttpServletResponse.sendRedirect方法和RequestDispatcher.forward方法都可以让浏览器获得另外一个URL所指向的资源,但两者的内部运行机制有着很 ...

  4. mysql与sql server参照对比学习mysql

    mysql与sql server参照对比学习mysql 关键词:mysql语法.mysql基础 转自桦仔系列:http://www.cnblogs.com/lyhabc/p/3691555.html ...

  5. curl: (60) SSL certificate problem: unable to get local issuer certificate

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  6. HDOJ 1423 Greatest Common Increasing Subsequence 【DP】【最长公共上升子序列】

    HDOJ 1423 Greatest Common Increasing Subsequence [DP][最长公共上升子序列] Time Limit: 2000/1000 MS (Java/Othe ...

  7. HDU - 6395 Sequence (分块+快速矩阵幂)

    给定递推式: 求Fn. 分析:给出的公式可以用快速矩阵幂运算得到,但 P/n 整除对于不同的i,值是不同的. 可以根据P将3-n分成若干块,每块中P整除n的值是相同的.分块的时候要注意判断. 将每块的 ...

  8. python网络编程——IO多路复用select/poll/epoll的使用

    转载博客: http://www.haiyun.me/archives/1056.html http://www.cnblogs.com/coser/archive/2012/01/06/231521 ...

  9. ng-click得到当前元素,

    直接上代码: <!DOCTYPE html> <html> <head> <title></title> <script src=&q ...

  10. json字符串转化为json对象and 对象转化为 json字符串

    第一种方法: var data =evel('('+jsonstr+')') 解析:  这种方法是常用的方法, 即动态执行 javascript代码 在堆中存放数据. 存在安全问题. 第二种方法:   ...