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 ...
随机推荐
- js写的替换字符串（相当于js操作字符串的一个练习）
1.达到的效果 1./main_1.do,/left_1.do -> main:1,left:1 2./tbl_type/v_list_{id}.do -> tbl_type:list:{ ...
- CodeForces 732A Buy a Shovel (水题)
题意:你手中有10元的钱,还有一个r元的零钱,要买一个价格为k的物品,但是你要求不找零钱,求最少要买多少物品. 析:直接暴力,最多买10个物品就够了1-10. 代码如下: #pragma commen ...
- java对cookie的操作_01
/** * 读取所有cookie * 注意二.从客户端读取Cookie时,包括maxAge在内的其他属性都是不可读的,也不会被提交.浏览器提交Cookie时只会提交name与value属性.maxAg ...
- 通过java发送http请求
通常的http请求都是由用户点击某个连接或者按钮来发起的,但是在一些后台的Java程序中需要发送一些get或这post请求,因为不涉及前台页面,该怎么办呢? 下面为大家提供一个Java发送http请求 ...
- 函数定义从零开始学C++之从C到C++（一）：const与#define、结构体对齐、函数重载name mangling、new/delete 等
今天一直在学习函数定义之类的问题,下午正好有机会和大家共享一下. 一.bool 类型 逻辑型也称布尔型,其取值为true(逻辑真)和false(逻辑假),存储字节数在不同编译系统中可能有所不同,VC+ ...
- char指针
1.在C语言中,没有字符串类型,因此使用char指针表示字符串. 2.那么问题来了,使用char* 表示字符串,到哪里是结尾呢?因此需要一个特殊的字符作为哨兵,类似迭代器中的end(),这个哨兵就是' ...
- Codeforces Gym 100650D Queens, Knights and Pawns 暴力
Problem D: Queens, Knights and PawnsTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu ...
- 安卓Activity界面切换添加动画特效
在Android 2.0之后有了overridePendingTransition() ,其中里面两个参数,一个是前一个activity的退出两一个activity的进入, @Override pub ...
- oc-02-NSLog使用
#import <Foundation/Foundation.h> /* NSLog() : C语言中的 printf的增强版 作用: 向控制台输出打印数据. 增强的地方 : 打印时间 , ...
- 在线服务之socket编程科普
简介 本篇文章是介绍一个典型的在线C++服务的最底层socket管理是如何实现的. 文章会从一个最简单的利用socket编程基础API的一个小程序开始,逐步引入现在典型的select,epoll机制, ...