有趣的css图形实现
css通过 border 、border-radius 、transform，实现各种图形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css图形实现</title>
<style type="text/css">
div{
margin:20px;
}
/*css图形变换原理*/
#border-Style-w{
width: 100px;
height: 100px;
border-top:100px solid #0f0;
border-right:100px solid #f00;
border-bottom:100px solid #f0f;
border-left:100px solid #00f;
}
#border-Style{
width: 0;
height: 0;
position: relative;
border-top:100px solid #0f0;
border-right:100px solid #f00;
border-bottom:100px solid #f0f;
border-left:100px solid #00f;
}
#border-Style:before{
content: '';
width: 0;
height: 0;
border-left:1px solid #000;
border-top:110px solid #000;
border-bottom:110px solid #000;
}
#border-Style:after{
content: '';
width: 0;
height: 0;
position: absolute;
left:-105px;
top:0;
border-left:110px solid #000;
border-top:1px solid #000;
border-right:110px solid #000;
}
/*正方形*/
#square{
width: 100px;
height: 100px;
background-color:red;
}
/*矩形*/
#rectangle{
width: 200px;
height: 100px;
background-color: red;
}
/*圆*/
#cricle{
width: 100px;
height: 100px;
background-color: red;
border-radius:50%;
}
/*椭圆*/
#oval{
width: 200px;
height: 100px;
background-color: red;
border-radius:100px/50px;//????
}
/*上三角*/
#triangle-Up{
width: 0;
height: 0;
border-bottom: 40px solid red;
border-left:20px solid transparent;
border-right:20px solid transparent;
}
/*下三角*/
#triangle-Down{
width: 0;
height: 0;
border-top:40px solid red;
border-left:20px solid transparent;
border-right:20px solid transparent;
}
/*左下三角*/
#triangle-BottomLeft{
width: 0;
height: 0;
border-bottom: 40px solid red;
border-right:40px solid transparent;
}
/*右下三角*/
#triangle-BottomRight{
width: 0;
height: 0;
border-bottom:40px solid red;
border-left:40px solid transparent;
}
/*左上三角*/
#triangle-TopLeft{
width: 0;
height: 0;
border-top:40px solid red;
border-right:40px solid transparent;
}
/*右上三角*/
#triangle-TopRight{
width: 0;
height: 0;
border-top:40px solid red;
border-left:40px solid transparent;
}
/*旋转箭头*/
#curvedarrow{
position:relative;
width: 0;
height: 0;
border-top:9px solid transparent;
border-right:9px solid red;
transform:rotate(10deg);
}
#curvedarrow:after{
content:"";
position:absolute;
border:0 solid transparent;
border-top:3px solid red;
border-radius:20px 0 0 0;
top:-12px;
left:-9px;
width: 12px;
height: 12px;
transform:rotate(45deg);
}
/*旋转箭头*/
#curvedarrow01{
position: relative;
width: 0;
height: 0;
border-bottom: 9px solid red;
border-right:9px solid transparent;
transform:rotate(65deg);
}
#curvedarrow01:after{
content:"";
position:absolute;
border:0 solid transparent;
border-top:3px solid red;
border-radius:20px 0 0 0;
width: 12px;
height: 12px;
top:-10px;
left:-2px;
transform:rotate(135deg); }
/*旋转箭头*/
#curvedarrow02{
position: relative;
width: 0;
height: 0;
border-top:9px solid red;
border-right:9px solid transparent;
transform: rotate(15deg);
}
#curvedarrow02:after{
content:"";
position:absolute;
border:0 solid transparent;
border-top:3px solid red;
border-radius:20px 0 0 0;
width: 12px;
height: 12px;
top:-15px;
left:4px;
transform:rotate(215deg);
}
/*梯形*/
#trapezoid{
width: 100px;
height: 0;
border-bottom: 40px solid red;
border-left:40px solid transparent;
border-right:40px solid transparent;
}
/*平行四边形*/
#parallelogram{
width: 200px;
height: 100px;
transform:skew(20deg);
background-color: red;
}
/*六角形*/
#star-Six{
width: 0;
height: 0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid red;
position:relative;
}
#star-Six:after{
width: 0;
height: 0;
border-top:100px solid red;
border-right:50px solid transparent;
border-left:50px solid transparent;
position:absolute;
top:30px;
left:-50px;
content:"";
}
/*五角星*/
#star-Five{
margin: 50px 0;
position: relative;
display:block;
color:red;
width: 0;
height: 0;
border-right:100px solid transparent;
border-bottom:70px solid red;
border-left:100px solid transparent;
transform:rotate(35deg);
}
#star-Five:before{
border-bottom:80px solid red;
border-left:30px solid transparent;
border-right:30px solid transparent;
position:absolute;
height: 0;
width: 0;
top:-45px;
left:-65px;
display: block;
content:"";
transform:rotate(-35deg);
}
#star-Five:after{
position:absolute;
display:block;
color:red;
top:3px;
left:-105px;
width: 0;
height: 0;
border-right:100px solid transparent;
border-bottom:70px solid red;
border-left:100px solid transparent;
transform:rotate(-70deg);
content:"";
}
/*五角形*/
#pentagon{
position:absolute;
width: 54px;
border-width:50px 18px 0;
border-style:solid;
border-color:red transparent;
}
#pentagon:before{
content:"";
position:absolute;
height: 0;
width: 0;
top:-85px;
left:-18px;
border-width:0 45px 35px;
border-style:solid;
border-color:transparent transparent red;
}
/*六角形*/
#hexagon{
margin: 200px 0 0 0;
width: 100px;
height: 55px;
background-color: red;
position:relative;
}
#hexagon:before{
content:'';
position:absolute;
top:-25px;
left:0;
width:0;
height: 0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:25px solid red;
}
#hexagon:after{
content:'';
position:absolute;
bottom:-25px;
left:0;
width: 0;
height: 0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:25px solid red;
}
/*八边形*/
#octagon{
margin: 100px 0 0 0;
width: 100px;
height: 100px;
background-color: red;
position:relative;
}
#octagon:before{
content:'';
position:absolute;
top:0;
left:0;
border-bottom:29px solid red;
border-left:29px solid #fff;
border-right:29px solid #fff;
width: 42px;
height: 0;
}
#octagon:after{
content:'';
position:absolute;
bottom:0;
left:0;
border-top:29px solid red;
border-left:29px solid #fff;
border-right:29px solid #fff;
width:42px;
height: 0;
}
/*心形*/
#heart{
position:relative;
width:100px;
height: 90px;
}
#heart:before,
#heart:after{
position:absolute;
content:'';
left:50px;
top:0;
width: 50px;
height: 80px;
background-color: red;
border-radius:50px 50px 0 0;
transform:rotate(-45deg);
transform-origin:0 100%;
}
#heart:after{
left:0;
transform:rotate(45deg);
transform-origin:100% 100%;
}
/*无穷大*/
#infinity{
position: relative;
width: 212px;
height: 100px;
}
#infinity:before,#infinity:after{
content:'';
position:absolute;
top:0;
left:0;
width: 60px;
height: 60px;
border:20px solid red;
border-radius:50px 50px 0 50px;
transform:rotate(-45deg);
}
#infinity:after{
left:auto;
right:0;
border-radius: 50px 50px 50px 0;
transform:rotate(45deg);
}
/*月亮*/
#moon{
width: 80px;
height: 80px;
border-radius:50%;
box-shadow:15px 15px 0 0 red;
}
/*圆锥*/
#cone{
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top:100px solid red;
border-radius:50%;
}
/*太急*/
#taiji{
width: 96px;
height: 48px;
background-color: #fff;
border:2px solid #000;
border-bottom-width: 50px;
border-radius:100%;
position:relative;
}
#taiji:before{
content:'';
position:absolute;
top:50%;
left:0;
background-color: #fff;
border:18px solid #000;
border-radius:100%;
width: 12px;
height: 12px;
}
#taiji:after{
content:'';
position:absolute;
top:50%;
left:50%;
background-color:#000;
border:18px solid #fff;
border-radius:100%;
width: 12px;
height: 12px; }
/*对话框*/
#talkbubble{
width: 120px;
height: 80px;
background-color: #fff;
position:relative;
border-radius:10px;
border:2px solid #ccc;
}
#talkbubble:after{
content:'';
position:absolute;
width: 0;
height: 0;
border-top:13px solid transparent;
border-right:26px solid #ccc;
border-bottom: 13px solid transparent;
right: 100%;
top:26px;
}
</style>
</head>
<body>
<div id="border-Style-w"></div>
<div id="border-Style"></div> <div id="square"></div>
<div id="rectangle"></div>
<div id="cricle"></div>
<div id="oval"></div>
<div id="triangle-Up"></div>
<div id="triangle-Down"></div>
<div id="triangle-BottomLeft"></div>
<div id="triangle-BottomRight"></div>
<div id="triangle-TopLeft"></div>
<div id="triangle-TopRight"></div>
<div id="curvedarrow"></div>
<div id="curvedarrow01"></div>
<div id="curvedarrow02"></div>
<div id="trapezoid"></div>
<div id="parallelogram"></div>
<div id="star-Six"></div>
<div id="star-Five"></div>
<div id="pentagon"></div>
<div id="hexagon"></div>
<div id="octagon"></div>
<div id="heart"></div>
<div id="infinity"></div>
<div id="moon"></div>
<div id="cone"></div>
<div id="taiji"></div>
<div id="talkbubble"></div>
</body>
</html>
有趣的css图形实现的更多相关文章
- 谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 奇妙的 CSS shapes(CSS图形)
CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outsid ...
- 奇妙的 CSS shapes(CSS图形) 【css 图形，绘图，CSS 几何图形)】
http://www.cnblogs.com/coco1s/p/6992177.html <!DOCTYPE html> <html> <head> <met ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
随机推荐
- long类型在内存中占8个字节，float类型在内存中占4个字节，为什么long还要比float小呢？
结论:数值范围大小和占用的字节没有关系. float类型的范围: 负数:-3.402823E38~-1.401298E-45 整数:0 正数:1.401298E-45~3.402823E38 long ...
- Django ajax 检测用户名是否已被注册
添加一个 register.html 页面 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- commons-dbutils【不推荐】
Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装. 一般项目开发过程中,要么选择 ORM框架,要么自己编写DBUtils类+数据库连接池就足够了.
- Setting up the data and the model
Table of Contents: Setting up the data and the model Data Preprocessing Weight Initialization Batch ...
- Rust中的控制结构
fn main() { let number = ; { println!("condition was true"); } else { println!("condi ...
- 第16节_BLE协议GAP层
学习资料:官方手册 Vol 3: Core System Package [Host volume] Part C: Generic Access Profile 下面这个图是BLE协议各层跟医院的各 ...
- day38_8_22数据库（navicat操作）
补充: exist存在EXISTS关字键字表示存在.在使用EXISTS关键字时,内层查询语句不返回查询的记录,而是返回一个真假值,True或False. 当返回True时,外层查询语句将进行查询当返回 ...
- day33_8_15 并发编程4，线程池与协程，io模型
一.线程池 线程池是一个处理线程任务的集合,他是可以接受一定量的线程任务,并创建线程,处理该任务,处理结束后不会立刻关闭池子,会继续等待提交的任务,也就是他们的进程/线程号不会改变. 当线程池中的任务 ...
- OpenStack产品摘要
docs OpenStack 核心服务 计算 Nova:虚拟化设施资源管理 ZUN:容器管理 QINLING:Serveless Function 裸金属 IRONIC:裸金属资源管理 CYBORDF ...
- VIJOS-P1325 桐桐的糖果计划
VIJOS-P1325 桐桐的糖果计划 JDOJ 1432 桐桐的糖果计划 https://neooj.com/oldoj/problem.php?id=1432 Description 桐桐很喜欢吃 ...