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 ...
随机推荐
- Activex WindowsMediaPlayer控件主要方法属性
属性/方法名: 说明:[基本属性] URL:String; 指定媒体位置,本机或网络地址 uiMode:String; 播放器界面模式,可为Full, Mini, None, Invisible pl ...
- 生成Base58格式的UUID（Hibernate Base64格式的UUID续）
Base58简介 Base58采用的字符集合为“123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ”,从这不难看出,Base58是纯数 ...
- 从0,1,2...n中统计0,1,2...9各出现了多少次【SWUN1597】
题目就是说给你一个N.计算一下从0,1,2,3,4,5,,,,,,n-1,n中计算出0,1,2,3,,,,7,8,9分别出现了多少次... #include<cstdio> #includ ...
- Bootstrap迁移系列 - Navbar
在V2.3.2版本中一个标准的导航栏模版如下: <div class="navbar"> <div class="navbar-inner"& ...
- Spring @RequestHeader用法
Spring MVC提供了 @RequestHeader注解,能够将请求头中的变量值映射到控制器的参数中.下面是一个简单的例子: import org.springframework.stereoty ...
- C++的辅助工具介绍
1 文档类 (1) Doxygen 参考站点:http://www.doxygen.org Doxygen是一种适合C风格语言(如C++.C.IDL.Java甚至包括C#和PHP)的.开放源码的 ...
- ecshop收货人信息中修改手机号为必填
Ecshop 修改收货人信息 把电话改成选择填写 手机改为必填 (加强版) 1. 编辑根目录/js/utils.js 增加手机号码的正则表达式 参照Utils.isTel = function ( ...
- linq to sql 三层架构中使用CRUD操作
/// <summary> /// 数据层 /// </summary> public partial class GasBottles : IGasBottles { #re ...
- python写的百度贴吧相册下载
突然想搞个这样的工具,写来写去都不知道在干嘛了,本来两个文件,现在整合在一起了. 乱得不行,懒得整理了,能用就行. 下载部分用了多线程,但是下载一个文件还是用的单线程,也就是没管http头的range ...
- [ES6] 16. Object Enhancements
Define object: var color = "blue"; var speed = 120; var car = {color, speed}; console.log( ...