有趣的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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
随机推荐
- Python环境安装与基础语法（1）——计算机基础知识
Python安装 pip #包管理工具 pip install #安装包 pip list #查看包 IPython #增强的python shell,自动补全,自动缩进,支持shell,增加了很多函 ...
- 深入理解defer（上）defer基础
深入理解 defer 分上下两篇文章,本文为上篇,主要介绍如下内容: 为什么需要 defer: defer 语法及语义: defer 使用要点: defer 语句中的函数到底是在 return 语句之 ...
- robotframework-post request请求携带上一个请求返回的cookie
公司的接口服务需要先登录,获取服务端的cookie后,在后续的请求中携带这个cookie才能够访问 在尝试用RF工具进行自动化接口测试时,发现先访问登录接口之后,接着请求其他接口时没有自动携带上次请求 ...
- JVM 启动参数，共分为3类
JVM 启动参数,共分为3类: 类别 说明 标准参数(-) 所有的JVM实现都必须实现这些参数的功能,而且向后兼容: 非标准参数(-X) 这些参数不是虚拟机规范规定的.因此,不是所有VM的实现(如:H ...
- woocommerce如何隐藏/显示product meta
前面我们说了woocommerce如何隐藏SKU,那如果不想显示产品分类category和标签tag呢?我们知道SKU, Category list 和 Tag list在woocommerce产品页 ...
- LeetCode 139. Word Break单词拆分 (C++)
题目: Given a non-empty string s and a dictionary wordDict containing a list of non-emptywords, determ ...
- JAVA List中剔除空元素（null）的方法
方法一.list.removeAll(Collections.singleton(null)); 方法二.List nullList = new ArrayList(); ...
- Python进阶-Ⅷ 匿名函数 lambda
1.匿名函数的引入 为了解决那些功能很简单的需求而设计的一句话函数 def func(i): return 2*i # 简化之后 func = lambda i:2*i #todo 其中:func是函 ...
- CSS3中的px,em,rem,vh,vw
1.px:像素,精确显示 2.em:继承父类字体的大小,相当于“倍”,如:浏览器默认字体大小为16px=1em,始终按照div继承来的字体大小显示,进场用于移动端 em换算工具:http://www. ...
- Linux性能优化实战学习笔记：第十二讲
一.性能优化方法论 不可中断进程案例 二.怎么评估性能优化的效果? 1.评估思路 2.几个为什么 1.为什么要选择不同维度的指标? 应用程序和系统资源是相辅相成的关系 2.性能优化的最终目的和结果? ...