文档章节

使用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
粉丝 139
博文 536
码字总数 580320
作品 0
济南
技术主管
私信 提问
企鹅电竞weex实践——UI开发篇

腾讯DeepOcean原创文章:dopro.io/egame-weex-… 随着电竞业务的不断发展,页面功能越来越多,交互逻辑更加复杂,类似无限滚动、上拉刷新、横竖切换滚动等形式在业务中已是标配,经过重重优化...

腾讯DeepOcean
11/15
0
0
QMUI Web 前端框架正式发布

QMUI Web 官网:http://qmuiteam.com/web Github: https://github.com/QMUI/qmuiweb QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。通过 QMUI Web,开发者可...

kayo5994
2016/08/04
4.9K
8
OpenGL超级宝典笔记——画三角形

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

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

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

handyTOOL
2017/12/01
0
0
CSS绘制三角形—border法

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

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

没有更多内容

加载失败,请刷新页面

加载更多

React和Redux的连接react-redux

通过Redux文档来了解react-redux,在一段时间的实践后准备翻一翻源代码,顺便做些相关的总结。我看的代码的npm版本为v4.0.0,也就是说使用的React版本是0.14.x。 react-redux提供两个关键模块...

前端攻城老湿
24分钟前
0
0
1、Mybatis连接池Context.xml配置

注意: (1)mybatis 3.2 之前 通过 set get 方法 获取相关属性。之后通过属性姓名获取相关关联。 (2)mybatis 映射 优先为 sql 语句中的别名与实体类的属性进行映射。 (3)jndi Java用于调...

KingFightingAn
39分钟前
0
0
Android 界面漩涡扭曲动效实现

背景:之前偶然看到优酷有类似的页面切换动画效果。于是自己也打算来实现下这样的效果。 动效说明:点击界面中的任意位置,界面以点击位置作为中心点,开始以漩涡状态,扭曲,收缩。直到消失...

Carlyle_Lee
50分钟前
2
0
聊聊我怎么系统学习Linux技能并快速提高的

聊聊我怎么系统学习Linux技能并快速提高的 随着电子信息科技时代的发展,学会使用计算机在我们的生活中成为了必不可少的一项技能。而作为计算机中的三大操作系统之一的Linux更是饱受计算机爱...

linuxCool
今天
4
0
Android/Java 获取一个byte[]的真实编码,用于解决乱码问题

来源地址:https://blog.csdn.net/qq_31384551/article/details/81627840 一个byte数组,byte[] buf,是由一个字符串转换来的,如何判断字符串使用的是什么编码? Mozilla的一个组件提供了相应...

她叫我小渝
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部