CSS3—三角形
1.加了宽高和border，边用不同颜色显示，每条边都是一个梯形
2.去掉宽高，每条边都是三角形
3.只显示其中一条边就是不同的三角形了,是不是很简单，改变border四条边宽度试试吧~
上述代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3—三角形</title>
</head>
<style>
.dib{display: inline-block;}
.triangle0{
width:40px;
height:40px;
border-top:40px solid yellow;
border-right:40px solid black;
border-bottom:40px solid pink;
border-left:40px solid red;
}
.triangle1{
width:0px;
height:0px;
border-top:40px solid yellow;
border-right:40px solid black;
border-bottom:40px solid pink;
border-left:40px solid red;
}
.trianglet{
width:0;
height:0;
border-top:40px solid yellow;
border-right:40px solid transparent;
border-left:40px solid transparent;
border-bottom:40px solid transparent;
}
.triangler{
width:0;
height:0;
border-top:40px solid transparent;
border-right:40px solid black;
border-bottom:40px solid transparent;
border-left:40px solid transparent;
}
.triangleb{
width:0;
height:0;
border-top:40px solid transparent;
border-right:40px solid transparent;
border-bottom:40px solid pink;
border-left:40px solid transparent;
}
.trianglel{
width:0;
height:0;
border-top:40px solid transparent;
border-right:40px solid transparent;
border-bottom:40px solid transparent;
border-left:40px solid red;
}
</style>
<body>
<div class="triangle0 dib"></div>
<div class="triangle1 dib"></div>
<div class="trianglet dib"></div>
<div class="triangler dib"></div>
<div class="triangleb dib"></div>
<div class="trianglel dib"></div>
</body>
</html>
博客园：CSS3—三角形
CSS3—三角形的更多相关文章
- CSS3 三角形运用
酷酷的 CSS3 三角形运用 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现 ...
- 酷酷的CSS3三角形运用
概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现后,借助一些具有魔力的CSS3属性 ...
- 【转载】酷酷的CSS3三角形运用
转载:http://www.cnblogs.com/keepfool/p/5616326.html 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工 ...
- CSS中的一下小技巧1之CSS3三角形运用
使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...
- css3三角形冒泡泡图形制作
图一: 图二: <!DOCTYPE html> <html> <head> <title>css 三角形</title> <style ...
- css3 三角形
https://jsbin.com/gexezo/edit?html,css,output https://jsbin.com/gexezo
- CSS3 画基本图形，圆形、椭圆形、三角形等
CSS3圆角#css3-circle{ width: 150px; height: 150px; border-radius: 50%; }CSS3 椭圆形css3 radius#css3-elips ...
- CSS3 实现圆形、椭圆形、三角形等各种形状样式
CSS3 圆形 #css3-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;} C ...
- CSS3—六边形
整理了2种方法,看完肯定觉得超简单~ 一.旋转型 话不多说先看下需要的样式: 1.transform:rotate(angle) 2.overflow 3.visibility 效果:演示效果,run ...
随机推荐
- thymeleaf中的th:each用法
一.th:eath迭代集合用法: <table> <thead> <tr> <th>序号</th> <th>用户名</th ...
- OpenNebula Restfull 接口请求示例
Fri Jun 20 07:28:20 2014 [I]: 10.0.2.2 - - [20/Jun/2014 07:28:20] "POST /vmtemplate HTTP/1.1&qu ...
- Installation Directory must be on a local hard drive解决办法
今天带着公司的电脑来杭州这边,同事发来一个Sliksubversion.msi来进行安装,由于系统是win8.1的,直接点击安装不了,真的是醉了,于是乎发挥度娘的力量找到了答案,这里贴出来,供大家来参 ...
- Hibernate查询效率对比
查询已知表名的实体时推荐使用getHibernateTemplate().executeWithNativeSession() + SQLQuery方式. 以下测试使用JUnit进行,仅查询一次,查询 ...
- Centos 6.5安装python3.5.1
查看python的版本 #python -V Python 2.6.6 1.下载Python-3.5.1 #wget https://www.python.org/ftp/python/3.5.1/ ...
- nginx配置ssl
1.使用pfx证书配置ssl (http://www.heartlifes.com/archives/12/) .上传证书 .生成证书crt及key文件 openssl pkcs12 -in /usr ...
- Eclipse10大快捷键组合
一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升. Ctrl+Shift+C 快速单行注释 也适用于 ...
- C++ 对象没有显式初始化
C++ 对象没有显式初始化,结果是什么? 首先考虑非静态对象 1.方法内的局部对象: a.类类型:调用default构造方法 b.基本类型:值不确定 2.类中的数据成员: a.类类型:调用defaul ...
- vector<int> v2 = 42; 为何非法
C++ Primer 第四版,第十三章“复制控制” 习题13.2,为何vector<int> v2 = 42; 不能编译? 百度贴吧里的一位楼主给出了答案,本人认为正确,特此引用: 参考链 ...
- SOA面向服务化编程架构(dubbo)
dubbo 是阿里系的技术.并非淘宝系的技术啦,淘宝系的分布式服务治理框架式HSF啦 ,只闻其声,不能见其物.而dubbo是阿里开源的一个SOA服务治理解决方案,dubbo本身 集成了监控中心,注 ...