CSS3三角形绘制原理解析
来源:互联网 发布:linux使用搜狗输入法 编辑:程序博客网 时间:2024/06/05 09:22
今天认真学习了下三角形制作的原理。
截图:
代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS3三角形绘制原理</title>
<style type="text/css">
#test1 {
width: 100px;
height: 100px;
border:4px solid blue;
}
#test2 {
width: 100px;
height: 100px;
border:20px solid;
border-color:blue black red yellow;
}
#test3 {
width: 100px;
height: 100px;
border:50px solid;
border-color:blue black red yellow;
}
#test4 {
width: 0px;
height: 0px;
border:50px solid;
border-color:blue black red yellow;
}
#test5 {
width: 0px;
height: 0px;
border-left:50px solid yellow;
border-right:50px solid black;
border-bottom:100px solid red;
}
#test6 {
width: 0px;
height: 0px;
border-left:50px solid transparent; /* transparent 背景透明*/
border-right:50px solid transparent;
border-bottom:100px solid red;
}
#test7 {
width: 0px;
height: 0px;
border-left:50px solid transparent; /* transparent 背景透明*/
border-right:30px solid transparent;
border-bottom:100px solid red;
}
#test8 {
width: 50px;
height: 50px;
border-left:20px solid transparent; /* transparent 背景透明*/
border-right:20px solid transparent;
border-bottom:50px solid red;
}
/*正三角*/
#test_up {
width: 0px;
height: 0px;
border-left:50px solid transparent; /* transparent 背景透明*/
border-right:50px solid transparent;
border-bottom:100px solid red;
}
/*倒三角*/
#test_down {
width: 0px;
height: 0px;
border-left:50px solid transparent; /* transparent 背景透明*/
border-right:50px solid transparent;
border-top:100px solid red;
}
/*左三角*/
#test_left {
width: 0px;
height: 0px;
border-top:50px solid transparent; /* transparent 背景透明*/
border-bottom:50px solid transparent;
border-right:100px solid red;
}
/*右三角*/
#test_right {
width: 0px;
height: 0px;
border-top:50px solid transparent; /* transparent 背景透明*/
border-bottom:50px solid transparent;
border-left:100px solid red;
}
/*圆角生成原理推想*/
.box {
width:auto;
}
.top {
width:300px;
border-bottom:5px solid;
border-top-color:#cc0000;
border-bottom-color:#cc0000;
border-left:5px dotted transparent;
border-right:5px dotted transparent;
}
.center {
width:270px;
padding:10px 20px;
color:white;
font-size:14px;
background:#cc0000;
}
.bot {
width:300px;
border-top:5px solid;
border-top-color:#cc0000;
border-bottom-color:#cccccc;
border-left:5px dotted transparent;
border-right:5px dotted transparent;
}
</style>
</head>
<body>
<!--step1 正常边框效果-->
<div id="test1"></div>
<br>
<!--step2 继续增大边框的宽度并且使边框各个边的颜色不一致-->
<div id="test2"></div>
<br>
<!--step3 如果我们把边框的宽度设置成50px呢?会产生什么效果-->
<div id="test3"></div>
<br>
<!--step4 现在我们把边框的宽度设置成50px,把width和height设置为0-->
<div id="test4"></div>
<br>
<!--step5 上边界是0px,所以下边界会向上延升100px,左右各50px。就出现了上三角和左右三角型-->
<div id="test5"></div>
<br>
<!--step6 最后将左右2边的三角型透明化就变成了一个三角形了-->
<div id="test6"></div>
<br>
<!--step7 从等腰三角型到不等腰三角型,改变2个透明边框的宽度不一致就行-->
<div id="test7"></div>
<br>
<!--正三角-->
<div id="test_up"></div>
<br>
<!--倒三角-->
<div id="test_down"></div>
<br>
<!--左三角-->
<div id="test_left"></div>
<br>
<!--右三角-->
<div id="test_right"></div>
<br>
<!--step8 梯形-->
<div id="test8"></div>
<br>
<!-- CSS border圆角生成原理推想,有上下2个梯形加长方形组成 -->
<div id="box">
<div class="top"></div>
<div class="center">测试圆角生成原理</div>
<div class="bot"></div>
</div>
<br>
<br>
</body>
</html>
- CSS3三角形绘制原理解析
- 用纯css3绘制三角形的原理
- css3绘制三角形
- CSS绘制三角形原理
- css3制作三角形的原理
- CSS3绘制三角形,并实现翻转效果
- 使用CSS3绘制一个实心三角形
- CSS绘制三角形的原理剖析
- CSS绘制三角形的原理剖析
- CSS:纯CSS绘制三角形(原理)
- 绘制三角形
- 绘制三角形
- 经典CSS实现三角形图标原理解析
- 经典CSS实现三角形图标原理解析
- 笔记 纯css绘制三角形原理动态演示链接地址
- Quartz2d从易到难全解析---绘制封闭三角形,四边形
- android SurfaceView绘制实现原理解析
- CSS3 实用技巧:制作三角形
- gulp入门篇(一)
- 文章标题keydown、keyup的小区别
- 用筛选法求解n以内的所有素数
- 安卓项目SimpleQQ——联系人列表页面设计
- [09]表单元素(下)
- CSS3三角形绘制原理解析
- //2.日本某地发生了一件谋杀案,警察通过排查确定杀人凶手必为4个嫌疑犯的一个。以下为4个嫌疑犯的供词。 //A说:不是我。 //B说:是C。 //C说:是D。 //D说:C在胡说 //已知3个人说了
- 使用Altium Designer画PCB器件半落在视窗外无法选择移动解决办法
- C语言实现蛇形输出
- C语言 - 查找字符串中相同的字符函数的使用
- spring,mybatis 事务隔离级别管理
- 读取一个5*5数组,然后显示每行的和与每列的和
- HDFS Snapshots
- Wpf依赖属性