Sass mixin 使用css border属性画三角形
To be finished.
//triangle
@mixin css-triangle ($direction: "down", $size: 20px, $color: #000, $fillColor:#fff) {
width: 0;
height: 0;
position: relative;
z-index: 0;
border-left: #{setTriangleSize($direction, "left", $size)} solid #{setTriangleColor($direction, "left", $color)};
border-right: #{setTriangleSize($direction, "right", $size)} solid #{setTriangleColor($direction, "right", $color)};
border-bottom: #{setTriangleSize($direction, "bottom", $size)} solid #{setTriangleColor($direction, "bottom", $color)};
border-top: #{setTriangleSize($direction, "top", $size)} solid #{setTriangleColor($direction, "top", $color)};
.#{$namespace}triangle-fill{
width: 0;
height: 0;
position: absolute;
left: -($size/2-1);
top:-($size);
z-index: 1;
border-left: #{setTriangleSize($direction, "left", $size)} solid #{setTriangleColor($direction, "left", $fillColor)};
border-right: #{setTriangleSize($direction, "right", $size)} solid #{setTriangleColor($direction, "right", $fillColor)};
border-bottom: #{setTriangleSize($direction, "bottom", $size)} solid #{setTriangleColor($direction, "bottom", $fillColor)};
border-top: #{setTriangleSize($direction, "top", $size)} solid #{setTriangleColor($direction, "top", $fillColor)};
}
}
@function setTriangleColor($direction, $side, $color) {
@if $direction == "left" and $side == "right"
or $direction == "right" and $side == "left"
or $direction == "down" and $side == "top"
or $direction == "up" and $side == "bottom" {
@return $color
} @else {
@return "transparent";
}
}
@function setTriangleSize($direction, $side, $size){
@if (($direction == "left" or $direction == "right") and ($side=="left" or $side=="right"))
or (($direction == "up" or $direction == "down") and ($side=="top" or $side=="bottom")){
@return $size/2;
} @else{
@return $size;
}
}
@function setTriangleOffset($direction, $side, $size){
@if (($direction == "left" or $direction == "right") and ($side=="left" or $side=="right"))
or (($direction == "up" or $direction == "down") and ($side=="top" or $side=="bottom")){
@return $size/2;
} @else{
@return $size;
}
}
Sass mixin 使用css border属性画三角形的更多相关文章
- CSS border 属性和 border-collapse 属性
border 简写属性在一个声明设置所有的边框属性. 可以按顺序设置如下属性: border-width border-style border-color 如果不设置其中的某个值,也不会出问题,比如 ...
- 如果用css的border属性画一个三角形
假设页面中有个div,如何通过css做一个三角形.这是我们项目中用到的今天就稍微总结下.顺便说一句偷偷写博客的感觉还挺爽 div { width: 0; height: 0; border-top: ...
- 用CSS border相关属性画三角形
效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2l3aV9jb2Rlcg==/font/5a6L5L2T/fontsize/400/fill/I0J ...
- 利用css的border实现画三角形思路原理
1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...
- css border属性做小三角标
<!doctype html><html> <head> <title></title> <meta charset="ut ...
- CSS:不可思议的border属性
原文:Magic of CSS border property 译文:不可思议的CSS border属性 译者:dwqs 在CSS中,其border属性有很多的规则.对于一些事物,例如三角形或者其它的 ...
- css盒子模型中的border属性
认识border属性 我们可以通过boder属性来为元素设置边框:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线.CSS border 属性允许你规定元素边框的样式.宽度和 ...
- CSS3:不可思议的border属性&Web字体图标Font Awesome
CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...
- CSS border三角、圆角图形生成技术简介
http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...
随机推荐
- Node.js abaike图片批量下载Node.js爬虫1.00版
这个与前作的差别在于地址的不规律性,需要找到下一页的地址再爬过去找. //====================================================== // abaik ...
- node.js开发平台
1.EDP:基于Node.JS与NPM的企业级开发平台 什么是EDP? EDP是一个基于Node.JS与NPM的企业级前端应用的开发平台.主要通过命令行的方式使用.EDP提供了前端应用开发时经常使用的 ...
- Python 类的特殊成员方法详解
class doges(object): """类的描述信息""" def __init__(self,name,food): self.n ...
- SQLSTATE[HY000] [2002] Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
SQLSTATE[HY000] [2002] Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) 这个 ...
- 删除LINUX更新后多余的内核
删除LINUX更新后多余的内核 本人使用的时fredoa 21 之前为了搞网卡驱动不知不觉升级了几次系统,每次启动后都有好几个内核让我选,真的非常头疼阿,尤其像博主这样的有点强迫的人,看着就心烦,所以 ...
- 【CODEFORCES】 C. Table Decorations
C. Table Decorations time limit per test 1 second memory limit per test 256 megabytes input standard ...
- iOS:一个Cell中设置另外一个Cell中的button
场景: 子类化Cell中有button,拥有选中式样,点击第一个Cell中的button后,Cell一中的button获得选中式样.可是当点击Cell二中的button时.Cell一中的button选 ...
- Sklearn 中的 CrossValidation 交叉验证
1. 交叉验证概述 进行模型验证的一个重要目的是要选出一个最合适的模型,对于监督学习而言,我们希望模型对于未知数据的泛化能力强,所以就需要模型验证这一过程来体现不同的模型对于未知数据的表现效果. 最先 ...
- php对象序列化和cookie的问题,反序列化false
php对象序列化和cookie的问题,反序列化false $searchKeywords = array("羊奶","肥皂"); $searchKeywords ...
- /etc/syslog.conf文件作用
/etc/syslog.conf配置文件控制syslog daemon的操作规则形式:facility.level actionfacility.level 为选择器,action 指定与选择器匹配的 ...