scss实现不同方向的三角

//定义一个三角的函数 实现不同方向的三角加兼容ie6//第一个参数传入方向//第二个参数传入大小//第三个参数传入颜色//注意:传入参数中间必须逗号分隔@mixin triangle($x, $y:10px, $z:white ){    @if $x == "top"{        border-width: $y;        border-color:transparent transparent $z transparent;        border-style: dashed dashed solid dashed;    }    @else if $x == "bottom"{        border-width: $y;        border-color: $z transparent transparent transparent;        border-style: solid dashed dashed dashed;    }    @else if $x == "left"{        border-width: $y;        border-color:transparent $z transparent transparent;        border-style: dashed solid dashed dashed;    }    @else if $x == "right"{        border-width: $y;        border-color:transparent transparent transparent $z;        border-style: dashed dashed dashed solid;    }    width: 0;    height: 0;    overflow: hidden;}.box{    @include triangle(right, 200px, red);}
时间: 2024-11-05 18:49:58

scss实现不同方向的三角的相关文章

打印乘法口诀表四个方向

for (int i = 9; i >= 1; i--) { for (int k = i - 1; k > 0; k--) { System.out.print("\t"); } for (int j = 9; j >= i; j--) { System.out.print(i + "*" + j + "=" + i * j + "\t"); } System.out.println(); } System

【转】纯CSS写三角形-border法[晋级篇01]

(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角形的假象. 这里就涉及到一个绝对定位的问题,上.下.左.右四种方向的三角形相对于父级定位是不同的.首先我们来看下,当定位都为0(left

使用css做图标

首先原理是: 请一步一步粘贴代码,慢慢品味.其实,很简单... 1.首先三角形的前身是一个普通的矩形-正方形||长方形?ok! <div class='box'></div> .box{ border:80px solid red; } 没错,使用边框属性,我们得到了一个长方形. 然后,我们弄些三角出来. .box{ width:0; border:80px solid transparent; border-left:100px solid black; } <div cl

css 盒子模型理解

盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素.如图: 图中最内部的框是元素的实际内容,也就是元素框,紧挨着元素框外部的是内边距padding,其次是边框(border),然后最

植物风场运动模拟(Wind Animations for Trees)

提要 植物的运动模拟是图形学中的一个方向,今天就来讨论下怎么模拟出一个在风中荷叶. 植物力学模型 由于植物的模型在风中会有大变形的情况存在,这里采用的是有限元模拟的方法来实现. 关于基于有限元的物理模拟,可以参考: 有限单元法(The Finite Element Method) 专注网格剖分 - TetGen,NETGEN,Steller 在基于有限元物理模拟中,速度是最大的缺点,特别在四面体特别多的情况下,现在的配置比较不错的电脑(i7+GTX680)加上GPU计算的代码,可以接受的情况是小

画三角形

<!DOCTYPE html><html> <head> <style> .triangle { width : 0; height: 0; border : 100px solid transparent; border-top : 100px solid blue; /*这里可以设置border的top.bottom.left.right四个方向的三角*/ } </style> </head> <body> <d

Android进阶之自定义View实战(二)九宫格手势解锁实现

一.引言 在上篇博客Android进阶之自定义View实战(一)仿iOS UISwitch控件实现中我们主要介绍了自定义View的最基本的实现方法.作为自定义View的入门篇,仅仅介绍了Canvas的基本使用方法,而对用户交互层面仅仅处理了单击事件接口,在实际的业务中,常常涉及到手势操作,本篇博客以九宫格手势解锁View为例,来说明自定义View如何根据需求处理用户的手势操作.虽然九宫格手势解锁自定义View网上资料有很多,实现原理大同小异,但这里我只是根据自己觉得最优的思路来实现它,目的是让更

纯CSS写三角形-border法[晋级篇01]

纯CSS写三角形-border法[晋级篇01] 注意:所有知识点将不考虑IE6 ( ̄▽ ̄") (1)有边框的三角形 在上一篇完成简单的三角形border法后,我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角

border绘制三角形

(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角形的假象. 这里就涉及到一个绝对定位的问题,上.下.左.右四种方向的三角形相对于父级定位是不同的.首先我们来看下,当定位都为0(left