文档章节

使用sass绘制三角形

小致dad
 小致dad
发布于 2016/12/07 21:44
字数 322
阅读 22
收藏 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
粉丝 152
博文 539
码字总数 580673
作品 0
济南
技术主管
私信 提问
学习SceneKit之自定义几何体

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

handyTOOL
2017/12/01
0
0
OpenGL超级宝典笔记——画三角形

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

Mario_Q
2013/09/12
0
0
android 3D游戏开发 - 潜入理解

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

长平狐
2012/08/29
342
0
CSS绘制三角形—border法

1. 实现一个简单的三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形: 实现原理: 首先来看在为元素添加border时,border的样子;假设有如下代码: 效果图: 这是我们平常使...

阿尔卑斯的隆冬
2018/08/31
0
0
css实现三角形

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

tiancai啊呆
2018/01/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

深入理解JVM—JVM内存模型

深入理解JVM—JVM内存模型 我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区,用户磁盘和CPU的交互,而CPU运转速度越来越快,磁盘远远跟不上CPU的读写速度,才设计了内存...

onedotdot
31分钟前
1
0
MVC、MVCS、MVVM、MVP、VIPER等这么多架构模式哪一个好呢?

在项目开启阶段,其中一个很重要的环节就是选架构。 那么面对目前已知的这么多架构模式我们该怎么选择呢?这确实是个很让人头疼的问题! 下面我就在这里梳理一下目前常见的一些架构模式。 先...

Java干货分享
今天
4
0
简单模仿配置文件的反射机制

//Student类 public class Student { public void love() { System.out.println("python"); } } //Tesy类 public class Tesy { public static void main(String[] args) throws Exceptio......

南桥北木
今天
2
0
你真的需要了解一下CSS变量 var()的用法

当Web项目变得越来越大时,他的CSS会变得像天文数字那么大而且还变得混乱。为了帮助我们解决这个问题,新的CSS变量很快就会出现在主流浏览器中,它让开发人员能够重用并轻松编辑重复出现的C...

前端小攻略
今天
1
0
嵌入式应用选择合适的微控制器

为嵌入式应用选择微控制器有几个原因,即低成本,高集成度,增加可靠性,节省空间等。 准备所需硬件接口列表使用微控制器的基本硬件框图,准备一份微控制器需要支持的所有外设接口的列表。微...

linux-tao
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部