有趣的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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
随机推荐
- apk分析 1
配置抓包工具 关闭捕获主机通讯关闭 配置: 在手机端进行配置 进入wifi设置,长按网络高级选项->手动设置代理 测试是否设置成功,手机上随便开应用看抓包器是否有反应 打开抓包目标apk(恋恋, ...
- Unix/Linux/Mac os下 文件互传
说起文件互传,就不得不提命令scp. 他是Secure copy的缩写,使用ssh连接和加密方式, 如果两台机器之间配置了ssh免密登录, 那在使用scp的时候可以不用输入密码. scp 和 cp ...
- Django ajax 检测用户名是否已被注册
添加一个 register.html 页面 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- JDBC学习笔记一
JDBC学习笔记一 JDBC全称 Java Database Connectivity,即数据库连接,它是一种可以执行SQL语句的Java API. ODBC全称 Open Database Conn ...
- 8、RabbitMQ三种Exchange模式（fanout,direct,topic）的性能比较
RabbitMQ三种Exchange模式(fanout,direct,topic)的性能比较 RabbitMQ中,除了Simple Queue和Work Queue之外的所有生产者提交的消息都由Exc ...
- Python元组与字符串操作（9）——随机数、元组、命名元组
随机数 import random #导入random模块 randint(a,b) 返回[a,b]之间的整数 random.randint(0,9) randrange([start],stop,[ ...
- sqlalchemy(2)
orm介绍 orm英文全称object relational mapping,就是对象映射关系程序,简单来说我们类似python这种面向对象的程序来说一切皆对象,但是我们使用的数据库却都是关系型的,为 ...
- JDOJ 1152 是否是素数
1152: 是否是素数 https://neooj.com:8082/oldoj/problem.php?id=1152 题目描述 写一个判断素数的函数,在主函数输入一个整数,输出是否是素数的消息. ...
- Appium入门指南 - 环境搭建和Case编写
本文档将详细介绍如何搭建 Appium 的运行环境,以及如何编写一个简单的 UI 自动化测试用例.其中,也会穿插讲解一些 Appium 的基本知识.关于 Appium 的更多信息,大家可以查看官方文档 ...
- [LeetCode] 920. Number of Music Playlists 音乐播放列表的个数
Your music player contains N different songs and she wants to listen to L (not necessarily different ...