有趣的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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
随机推荐
- Can't toast on a thread that has not called Looper.prepare()
Android开发中Can't toast on a thread that has not called Looper.prepare()问题 说一下问题出现场景: 在一个Android项目中,利用 ...
- bootstrap的下拉菜单组件与导航条
前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...
- OL7.7安装Oracle 11.2.0.4
安装环境准备工具 yum –y install oracle-rdbms-server-11gR2-preinstall 创建目录 mkdir -p /u01/app/oracle/product/1 ...
- Jenkins + pipeline + Git + PHP （九）
一.准备环境介绍 192.168.5.71 # gitlab 仓库IP 192.168.5.72 # 开发环境,用于提交代码等 192.168.5.150 # www.leon.com 运行wordp ...
- xargs原理及用法详解
为什么需要xargs 管道实现的是将前面的stdout作为后面的stdin,但是有些命令不接受管道的传递方式,最常见的就是ls命令.有些时候命令希望管道传递的是参数,但是直接用管道有时无法传递到命令的 ...
- Nginx的代理配置（六）
一.正向代理 1. 指令说明 (1) resolver 这个用于设置DNS服务器的ip .DNS服务器的主要工作是进行域名解析,将域名映射为对应IP地址. 语法:resolver address .. ...
- bind 仿造 重写bind
简单版,不带参数 Function.prototype.my_bind = function(targ){ var _this = this; return function(){ _this.app ...
- leetcode622. 设计循环队列
设计你的循环队列实现. 循环队列是一种线性数据结构,其操作表现基于 FIFO(先进先出)原则并且队尾被连接在队首之后以形成一个循环.它也被称为“环形缓冲器”. 循环队列的一个好处是我们可以利用这个队列 ...
- hadoop 输入路径用正则表达式被默认处理为多个参数的问题
运行命令 hadoop jar wordcount.jar com.WordCount /inpath/*{beijing,shanghai,guangzhou}* /outpath/ ...
- C——letterCounter
/* 一个统计字母(含大小写)出现次数的C程序 */ #include <stdio.h> int main() { ]; char ch; /* initialization */ ; ...