文档章节

使用sass绘制三角形

小致dad
 小致dad
发布于 2016/12/07 21:44
字数 322
阅读 19
收藏 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
粉丝 133
博文 533
码字总数 580132
作品 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
308
0
css实现三角形

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

tiancai啊呆
01/10
0
0
CSS绘制三角形—border法

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

阿尔卑斯的隆冬
08/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

麒麟AI首席科学家现世

8月31日,华为发布了新一代顶级人工智能手机芯片麒麟980,成为全球首款7nm工艺手机芯片,AI方面也实现飞跃,支持人脸识别、物体识别、物体检测、图像分割、智能翻译等。 虽然如今人人都在热议...

问题终结者
昨天
1
0
告警系统主脚本、告警系统配置文件、告警系统监控项目

告警系统主脚本 main.sh内容 #!/bin/bash#Written by aming.# 是否发送邮件的开关export send=1# 过滤ip地址export addr=`/sbin/ifconfig |grep -A1 "ens33: "|awk '/inet/ {pr...

芬野de博客
昨天
2
0
MySQL autocommit探究

-- sessionA:tx_isolation=REPEATABLE-READmysql> select connection_id();+-----------------+| connection_id() |+-----------------+| 28 |+-----------------+......

安小乐
昨天
7
0
c++多线程锁 Mutex  自动判断死锁

c++多线程锁可以使用absl::Mutex std::mutex这两种,下面是demo代码。 使用absl:Mutex的时候打印: [mutex.cc : 1338] RAW: Cycle: [mutex.cc : 1352] RAW: mutex@0x683b68 stack: @ 0x43856......

青黑
昨天
3
0
Blockathon2018(成都站)比赛落幕,留给我们这些区块链应用思考

9月14日,HiBlock区块链社区主办的第二届Blockathon在成都菁融国际广场成功举行,30名参赛者分为5支队伍在48小时内完成区块链项目的创意、开发及路演,经过紧张的开发及现场评选,最终币托(...

HiBlock
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部