绘制三角形(sass)
绘制三角形
/// 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)的更多相关文章
- 纯CCS绘制三角形箭头图案
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码: /* create an arrow that points up */ div.ar ...
- unity 绘制三角形
哎 该学的还是要学 参考:http://www.narkii.com/club/thread-369573-1.html unity 顶点绘制三角形 脚本绘制; 其实filter和render就是进行 ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- 【转载】理解GL_TRIANGLE_STRIP等绘制三角形序列的三种方式
GL_TRIANGLE_STRIP绘制三角形方式很多时候令人疑惑,在这里对其运作机理进行解释. 一般情况下有三种绘制一系列三角形的方式,分别是GL_TRIANGLES.GL_TRIANGLE_STRI ...
- CSS - Tooltip-arrow 绘制三角形
问题:纯CSS实现bubble的三角形部分 方法:使用border来绘制三角形:例如 .trangle { ; border-color: transparent; border-style: sol ...
- CSS用border绘制三角形
使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子 ...
- Android OpenGL ES(十)绘制三角形Triangle .
三角形为OpenGL ES支持的面,同样创建一个DrawTriangle Activity,定义6个顶点使用三种不同模式来绘制三角形: float vertexArray[] = { -0.8f, - ...
- Android OpenGL 入门示例----绘制三角形和正方形
Android上对OpenGl的支持是无缝的,所以才有众多3D效果如此逼真的游戏,在Camera的一些流程中也有用到GLSurfaceView的情况.本文记录OpenGL在Android上的入门级示例 ...
随机推荐
- delphi ----Raize(第三方控件) TRzNumericEdit
一.Raize Edits 1.TRzNumericEdit IntegerOnly属性设置为false,可以输入小数. DisplayFormat := ',0.00;(,0.00)';;//小数默 ...
- easyui的datagrid无数据时下方滚动条不显示的解决办法(标题栏显示不完全)
easyui在写datagrid的时候标题栏有时候因为太多.太长所以无法显示所有的列,而且没数据的时候下方的滚动条是不显示的,这样就无法显示所有的列了.解决办法如下: onLoadSuccess: f ...
- BaseAction 类
public class BaseAction<T> extends ActionSupport implements ModelDriven<T>{ // 1. 封装数据 p ...
- CentOS7保留默认Python版本并安装更新Python2和Python3共存
CentOS 7 默认的python版本是python2.7.5.因为yum依赖于默认的python版本的缘由,所以要先保留默认版本,并修改yum文件头部后,才能开始安装更新python2和pytho ...
- 洛谷 P2300 合并神犇
洛谷 听说这题可以\(n^2\)水过去,不过这里介绍一种\(O(n)\)的做法. \(f[i]\)为第\(1-i\)位合并的次数. \(pre[i]\)为第\(1-i\)位最末尾的数. \(j\)为满 ...
- 我的Java开发学习之旅------>Java利用Comparator接口对多个排序条件进行处理
一需求 二实现Comparator接口 三验证排序结果 验证第一条件首先按级别排序级别最高的排在前面 验证第二条如果级别相等那么按工资排序工资高的排在前面 验证第三条如果工资相当则按入职年数排序入职时 ...
- Hibernate简单配置
1.配置构建路径,加载用户库,hibernate4.3.8 MySQL-Driver 2.写User.java 纯POJO+持久化注解=PO @Entity @Table(name=&quo ...
- 利用EasySQLMAIL实现自动数据提取和邮件发送功能 (1)
转自:http://blog.sina.com.cn/s/blog_1549483b70102wioy.html 最近几个月每天都在发通报.过程很繁琐,动作很机械,整个人就是一部机器,执行SQL,填E ...
- delphi 改变闪动光标
delphi 改变闪动光标 // 不同风格的光标 procedure TForm1.Edit1MouseDown(Sender: TObject; Button: TMouseButton;Shift ...
- String与其他类型的转换
首先,对于String类有一点是毫无疑问的:对String对象的任何改变都不影响到原对象,相关的任何change操作都会生成新的对象. 一. String与StringBuilder.StringBu ...