有趣的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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
随机推荐
- 第1篇Scrum冲刺博客
目录 第1篇Scrum冲刺博客 各个成员在 Alpha 阶段认领的任务 各个成员的任务安排 整个项目预期的任务量 敏捷开发前的感想 团队期望 第1篇Scrum冲刺博客 各个成员在 Alpha 阶段认领 ...
- 基于记忆性的中值滤波O(r)与O(1)复杂度的算法实现
本文参考博客:https://www.cnblogs.com/Imageshop/archive/2013/04/26/3045672.html 原生的中值滤波是基于排序算法的,这样的算法复杂度基本在 ...
- X264-编码模块和NAL打包输出
在上一篇介绍了编码器的VCL编码操作,分析了函数x264_slice_write().函数x264_slice_write()里有四个关键模块,分别是宏块分析模块.宏块编码模块.熵编码模块和滤波模块, ...
- bootstrap的下拉菜单组件与导航条
前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...
- Hadoop 从节点的 NodeManager 无法启动
一.问题描述 日志文件信息如下: -- ::, INFO nodemanager.NodeManager (LogAdapter.java:info()) - registered UNIX sign ...
- Ubuntu启动器快捷方式文件解析
快捷方式名称 app_name.desktop 路径: /usr/share/applications/app_name.desktop # 简洁快捷方式格式 [Desktop Entry] Name ...
- 201871010133-赵永军《面向对象程序设计（java）》第七周学习总结
201871010133-赵永军<面向对象程序设计(java)>第七周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...
- XSS-DOM
DOM型XSS是基于DOM文档对象模型的一种漏洞 通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问.所有 HTML 元素(节点)均可被修改,也可以创建或删除节点.(引用W ...
- Pycharm中使用from appium import webdriver时报错：ModuleNotFoundError: No module named 'appium'
此时先检查一下有没有安装Appium-Python-Client,如果没有安装Appium-Python-Client就在控制台输入pip install Appium-Python-Client进行 ...
- java 启动jar 指定端口
java 启动jar 指定端口 java -jar xxx.jar --server.port=80