文档章节

使用sass绘制三角形

小致dad
 小致dad
发布于 2016/12/07 21:44
字数 322
阅读 17
收藏 0
点赞 0
评论 0

用border生成三角形的@mixin:

// triangle
@mixin triangle($direction, $size, $borderColor ) {
  content:"";
  height: 0;
  width: 0;

  @if $direction == top {
    border-bottom:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  } 
  @else if $direction == right {
    border-left:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  } 
  @else if $direction == bottom {
    border-top:$size solid $borderColor;
    border-left:$size dashed transparent;
    border-right:$size dashed transparent;
  } 
  @else if $direction == left {
    border-right:$size solid $borderColor;
    border-top:$size dashed transparent;
    border-bottom:$size dashed transparent;
  }
}

这个@mixin主要有三个变量:第一个是方向的,因为三角形根据箭头朝向有四种方向,我们对应常用的css属性top,right,bottom,left;第二个表示三角形的大小;第三个表示颜色。当然你可以挑你常用的那个设置为变量的默认值,那样调用常用的那个就比较简单了,直接@include triangle;就ok了。

编译之后的css代码:

/* line 192, ../sass/test1.scss */
.top {
  content: "";
  height: 0;
  width: 0;
  border-bottom: 20px solid #322222;
  border-left: 20px dashed transparent;
  border-right: 20px dashed transparent;
}

/* line 195, ../sass/test1.scss */
.bottom {
  content: "";
  height: 0;
  width: 0;
  border-top: 20px solid #322222;
  border-left: 20px dashed transparent;
  border-right: 20px dashed transparent;
}

/* line 198, ../sass/test1.scss */
.left {
  content: "";
  height: 0;
  width: 0;
  border-right: 20px solid #322222;
  border-top: 20px dashed transparent;
  border-bottom: 20px dashed transparent;
}

/* line 201, ../sass/test1.scss */
.right {
  content: "";
  height: 0;
  width: 0;
  border-left: 20px solid #322222;
  border-top: 20px dashed transparent;
  border-bottom: 20px dashed transparent;
}

页面html代码:

<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>

效果:

© 著作权归作者所有

共有 人打赏支持
小致dad
粉丝 116
博文 518
码字总数 569093
作品 0
济南
技术主管
OpenGL超级宝典笔记——画三角形

学习了画线的知识,我们可以使用GLLINELOOP来画闭合的多边形。但是使用这种方式画出来的只有线框,多边形没有填充颜色。OpenGL支持绘制实心的多边形,并使用当前的颜色进行填充。 三角形 简单...

Mario_Q
2013/09/12
0
0
学习SceneKit之自定义几何体

本系列所有文章目录 获取示例代码 前言 上一篇文章中,介绍了系统提供的几种几何体,本文将介绍如何自定义几何体。3D几何体和2D图形类似,需要提供组成几何体的点坐标,不同的是,还要提供绘...

handyTOOL
2017/12/01
0
0
android 3D游戏开发 - 潜入理解

1.3d场景中的 3d模型的最基本单位是称为顶点的vertex 2.openGL支持多种多边形 openGL es目前只支持三角形 主要是出于性能的原因,任何多边形都可以拆分成多个三角形 在openGL中一个长方体可以...

长平狐
2012/08/29
308
0
css实现三角形

工作中经常遇到一些tip提示,tip提示会有一个小三角形,我们可以使用图片或者iconfont实现,当然最高级的还是用css实现。下面就简单总结一下如何使用css的border属性来绘制小三角。 假设我们...

tiancai啊呆
01/10
0
0
第三节 WebGL中使用gl.drawArrays()和gl.drawElements()绘制图形

我们可能都知道,很多三维模型构成的基本单位都是三角形(三角面片),例如.stl和.obj这两种应用广泛的三维模型文件格式。再复杂的模型都可以由三角面片来组成,由此可见三角形在图形学中的重...

qq_37338983
2017/11/16
0
0
为什么简单的 opengl 代码却没有绘制出形状

更新 之前在知乎上发了一个帖子来询问,有个答主金条回答了而且还带了参考文档,原来在 specification 中有说明(好吧,看见那个一坨我就没有去翻了,后面有问题还是得去这里看看,说不定可以...

吃辣不放糖
2016/09/16
114
0
手把手教你使用OpenGL ES

>话不多说,拿起键盘就是干。OpenGL ES可以实现3D效果,而且在性能要求比较高的情况,或者一般的自定义View难以达到的效果可以考虑一下。就像官方说的,OpenGL ES直接通过GPU进行图形加速,唯...

C6C
01/03
0
0
canvas核心技术-如何绘制图形

这篇学习和回顾canvas系列笔记的第二篇,完整笔记详见:canvas核心技术 通过上一篇canvas核心技术-如何绘制线段的学习,我们知道了如何去绘制线段。很多的线段的拼接就组成了图形了,比如常见...

snayan
07/18
0
0
如何使用旋转法绘制平行四边形的窍门

很多的数学老师为了使自己的课程更加的生动有趣,往往会在课堂上使用一些辅助教程的软件,比如几何画板。但是这个需要老师能够熟练的掌握和使用这个软件。为了让大家在使用过程中更加的顺畅,...

学术研究软件
2016/07/18
64
0
手 Q 人脸识别动画实现详解

欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 前言 开门见山,先来看下效果吧。 看到这么酷炫的效果图,不得不赞叹一下我们的设计师。然而,站在程序员的角度上看,除了酷炫之外...

腾讯云社区
2017/11/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

时间复杂度

1. 维基上的定义 在计算机科学中,算法的时间复杂度是一个函数,它定性描述该算法的运行时间。这是一个代表算法输入值的字符串的长度的函数。时间复杂度常用大O符号表述,不包括这个函数的低...

liuyan_lc
11分钟前
0
0
js中的~符

~是js里的按位取反操作符,~~就是执行两次按位取反,其实就是保持原值,但是注意虽然是原值,但是对布尔型变量执行这个操作,会转化成相应的数值型变量,也就是 ~~true === 1,~~false === 0...

JamesView
12分钟前
0
0
webpack安装

npm install --save-dev webpack-cli

Vincent-Duan
14分钟前
0
0
实时监听EditText内容变化

主要是addTextChangedListener方法的使用 aswerEdittext.addTextChangedListener(new TextWatcher() { //编辑框的内容发生改变之前的回调方法 @Override public void before...

王先森oO
17分钟前
0
0
python连接mysql数据库

安装好必要的pymysql插件 pip install pymysql 写好配置文档 DATABASES = { # 'default': { # 'ENGINE': 'django.db.backends.sqlite3', # 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), #......

南桥北木
19分钟前
0
0
linux下安装 Zookeeper

Zookeeper 注册中心安装 安装: wget http://www.apache.org/dist/zookeeper/zookeeper-3.3.3/zookeeper-3.3.3.tar.gztar zxvf zookeeper-3.3.3.tar.gzcd zookeeper-3.3.3cp conf/zoo_......

颖辉小居
21分钟前
0
0
C#判断文件的真实类型(非扩展名判断)

public static void CheckFileType() { string path = @"D:\word.doc"; System.IO.FileStream fs = new System.IO.FileStream(path, System.IO.FileMode.Open, System.IO.FileAccess.Read); ......

Lytf
22分钟前
0
0
java - 把日志生成到指定目录

1.按天小时生成日志文件 log4j.appender.ruiming.DatePattern='_'yyyy-MM-dd-HH 2.最大日志文件数据 log4j.appender.ruiming.MaxBackupIndex=100 3.下图画圈圈的很关键,是生成到知道目录必备...

轻量级赤影
23分钟前
0
0
少走弯路,给Java 1~5 年程序员的建议

今天LZ是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈每个阶段要学习的内容甚至是一些书籍。这一部分的内容,同样适用于一些希望转行到Java的同学。 在大家看之前,LZ要先声...

Java填坑之路
23分钟前
1
0
Java transient关键字

transient关键字使用方法 我们都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,java的这种序列化模式为开发者提供了很多便利,我们可以不必关系具体序列化的过程,只要这...

蔡小鹏
25分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部