CSS 使用border来创建三角形的基本思路和实例
时间:2016-05-07
本文章向码农介绍CSS中使用border来创建三角形的基本思路和实例,文中同时还附带了对HTML5 Canvas和SVG三角形的介绍,需要的码农可以参考下
比较简单实用的还是使用border来创建三角形,今天主要研究这个的实现
将边框分别设置为红/黄/蓝/绿
.triangle {
height: 0;
width: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color: #ff0000 #ffff00 #0000ff #008000;
border-style: solid;
border-width: 40px 40px 40px 40px;
}
效果如下:
四个三角形合成一个正方形,大小为80x80,如果我们只想保留其中某个三角形的话,将其它的设置为透明即可,比如(以下css未改变部分与上面相同)
.triangle {
border-color: #ff0000 transparent transparent transparent;
border-width: 40px 40px 40px 40px;
}
效果如下:
IE6不支持transparent,所以不会透明而会显示难看的黑色,不过也有解决方法:将透明的部分对应的border-style设为dashed即可
.triangle {
border-color: #ff0000 transparent transparent transparent;
border-style: solid dashed dashed dashed;
border-width: 40px 40px 40px 40px;
}
正方形按对角线平分为两个三角形的情况
.triangle {
border-color: #ff0000 #ffff00 #0000ff #008000;
border-style: solid;
border-width: 0 0 40px 40px;
}
.triangle {
border-color: #ff0000 #ffff00 #0000ff #008000;
border-style: solid;
border-width: 0 40px 40px 0;
}
需要指出的是,此时正方形的大小为40x40
如果将border-width的某一边设为0又会怎么样呢?也算是两种情况
.triangle {
border-color: #ff0000 #ffff00 #0000ff #008000;
border-style: solid;
border-width: 40px 40px 0 40px;
}
.triangle {
border-color: #ff0000 #ffff00 #0000ff #008000;
border-style: solid;
border-width: 40px 40px 40px 0;
}
结果是长方形,其中一边为80一边为40。宽度被设为0的边框对应方向的边框会形成较大的三角形,且长度加倍
segmentfault的"采纳"的显示其实也是用三角形实现的
上部分是包含'采纳'两个字的块状元素,设置position: relative。下部分用伪类after设置一个position: absolute的块状元素,将两者接在一起。通过border-width设置成长方形而不是正方形,再将下方的三角形去掉即可,看下面的css十分明显,这也是三角形的一个很好的应用
.accepted-flag:after {
position: absolute;
left: 0;
top: 25px;
content: '';
border-width: 9px 18px;
border-style: solid;
border-color: #009a61 #009a61 transparent #009a61;
}
HTML5 Canvas
在你的HTML文件中有以下的canvas元素:
<canvas id="triangle" height="100" width="100">Triangle</canvas>
这里的如何使用JavaScript绘制一个三角形:
var canvas = document.getElementById('triangle');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(50, 100);
context.closePath();
context.fillStyle = "rgb(78, 193, 243)";
context.fill();
SVG (Scalable Vector Graphics)
这是如何在您的标签,你可以定义一个内联SVG三角形:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
<polygon points="0,0 100,0 50,100"/>
</svg>
然后,只需添加一些样式:
.svg-triangle{
margin: 0 auto;
width: 100px;
height: 100px;
}
.svg-triangle polygon {
fill:#98d02e;
stroke:#65b81d;
stroke-width:2;
}
- 解决WordPress 打开Feed页面“This page contains the following errors…”的问题
- jquery表单属性筛选元素
- [C#1] 10-事件
- Windows 7的VPC虚拟机自动不与主机时间同步的解决办法
- [C#1] 9-委托
- jquery基本选择器
- rainyday.js——超逼真全屏雨滴模拟插件
- [C#1] 8-数组
- ASP.NET MVC2 数据模型验证类库:MVC Foolproof Validation
- [C#1] 7-枚举
- 在链接前面自动添加favicon 图标(jquery)
- zepto 基础知识(4)
- Intro.js:网站功能操作分布引导插件(附中文独家使用教程)
- [C#1] 6-方法
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Kubernetes微服务自动化发布系统
- redis命令和lua实现分布式锁
- SpringBoot使用Redis做缓存结合自带注解
- Ardunio板子测试
- 上拉电阻和下拉电阻
- Ardunio Uno R3引脚图
- Spring Cloud Eureka服务注册与发现
- Consul的服务注册与发现(简单介绍)
- Docker安装kafka
- Docker安装RabbitMQ
- 分布式文件存储-FastDFS
- JWT对SpringCloud进行认证和鉴权
- @SpringBootConfiguration注解
- spring注解之@Import注解的三种使用方式
- 为什么我要写spring.factories文件?