CSS3实现各种图形的示例代码


Posted in HTML / CSS onOctober 19, 2016

1、自适应的椭圆

复制代码
代码如下:

<div class="div1"> 鼠标划上来看看</div>
<style>
.div1{ background:#fb3; width:200px; height:200px; line-height:200px;
text-align: center; border-radius: 50%; transition: all 0.25s ease-in;
}
.div1:hover{ background: #ff1d50; width:400px; height:200px; border-radius: 50%;
-webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
}
/* -> 首先你得知道,border-radius不仅仅支持整数,还支持百分比 */
</style></p> <p>

CSS3实现各种图形的示例代码

运动的椭圆

2、半椭圆

复制代码
代码如下:

<div class="div2"></div>
<div class="div3"></div>
<style>
.div2{ background:#fb3; width:100px; height:100px; border-radius: 100% 0 0 0; transition: all 0.25s ease-in; }
.div3{ background:#fb3; width:100px; height:100px; border-radius: 0 0 0 100%; transition: all 0.25s ease-in; }
/* -> 首先你得知道,border-radius不仅仅支持整数,还支持百分比 */
</style>

本来一个div就可以,不过我用了两个四十五度的,自己玩。

CSS3实现各种图形的示例代码

半椭圆

3、平行四边形

复制代码
代码如下:

<div class="div4">首先</div>
<style>
.div4{ position:relative; width:100px; height:100px; line-height:100px; text-align: center; color: #fff; }
.div4::before { content: ''; /* 用伪元素来生成一个矩形*/
position:absolute; top:0; right:0; bottom:0; left:0; z-index: -1;
background:#58a; transform:skew(15deg); }
</style>

CSS3实现各种图形的示例代码

平行四边形

4、平行四边形

复制代码
代码如下:

<div class="div5">
<img src="../w658.jpg"/>
</div>
<style>
.div5{
width:100px;
height: 100px;
transform:rotate(45deg);
overflow:hidden; }
.div5 >img {
max-width:100%;
transform: rotate(-45deg)scale(1.42);
}
</style>

CSS3实现各种图形的示例代码

平行四边形

5、切角矩形

复制代码
代码如下:

<div class="div6"></div>
<style>
.div6{
width:200px;
height:100px;
background:#58a;
background:
linear-gradient(-45deg,transparent 15px, #58a 0) right,
linear-gradient(45deg,transparent 15px, #655 0) left;
background-size:50% 100%;
background-repeat: no-repeat;
}
</style>

CSS3实现各种图形的示例代码

切角矩形

6、凹角矩形

复制代码
代码如下:

<div class="div7"></div>
<style>
.div7{
width:240px;
height:50px;
background:#58a;
background:
radial-gradient(circle at top left,
transparent 8px,#58a 0)top left,
radial-gradient(circle at top right,
transparent 8px,#58a 0)top right,
radial-gradient(circle at bottom right,
transparent 8px, #58a 0)bottom right,
radial-gradient(circle at bottom left,
transparent 8px,#58a 0)bottom left;
background-size:50% 50%;
background-repeat:no-repeat;
}
</style>

CSS3实现各种图形的示例代码

凹角矩形

7、切角矩形(SVG)

复制代码
代码如下:

<div class="div8"></div>
<style>
.div8{
width:240px;
height:50px;
background:#58a;
border:15px solid #58a;/* 当切角存在时,则显示切角,不支持时,则显示边框 */
border-image:1 url('data:image/svg+xml,<svg xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>" width="3" height="3" fill="%2358a">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/></svg>');
background-clip:padding-box; }
</style>

CSS3实现各种图形的示例代码

切角矩形

8、梯形

复制代码
代码如下:

<div class="div9"></div>
<style>
.div9{
width:240px;
height:40px;
position:relative;
color: white;
}
.div9:before{
content: ''; /* 用伪元素来生成一个矩形*/
position:absolute;
top: 0;
right:0;
bottom:0;
left:0;
z-index:-1;
background:#58a;
transform:perspective(.5em)rotateX(5deg);
}
</style>

CSS3实现各种图形的示例代码

梯形

9、梯形

复制代码
代码如下:

<div class="div10"></div>
<div class="div10"></div>
<div class="div10"></div>
<div class="div10"></div>
<style>
.div10{
float:left;
width:60px;
height:40px;
position:relative;
padding:.3em 1em 0;
}
.div10:before{
content: '';
position: absolute;
width:110px;
top:0;right:0;
bottom:0;
left:0;
z-index:-1;
background:#ccc;
background-image:linear-gradient(
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0));
border:1px solid rgba(0,0,0,.4);
border-bottom:none;
border-radius:.5em .5em 0 0;
box-shadow:0 .15em white inset;
transform:perspective(.5em)rotateX(5deg);
transform-origin:bottom;
}
</style>

CSS3实现各种图形的示例代码

梯形

10、梯形

复制代码
代码如下:

<div class="div11"></div>
<div class="div11"></div>
<div class="div11"></div>
<div class="div11"></div>
<style> .div11{
float:left;
width:60px;
height:40px;
position:relative;
padding:.3em 1em 0;
}
.div11:before{
content: '';
position: absolute;
width:110px;
top:0;right:0;
bottom:0;left:0;
z-index:-1;
background:#ccc;
background-image:linear-gradient(
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0));
border:1px solid rgba(0,0,0,.4);
border-bottom:none;
border-radius:.5em .5em 0 0;
box-shadow:0 .15em white inset;
transform:perspective(.5em) rotateX(4deg);
transform-origin:bottom left;
}
</style>

CSS3实现各种图形的示例代码

梯形

11、div饼图

复制代码
代码如下:

<div class="div12">
<div></div>
<div><div></div></div>
<div></div> <div></div>
</div>
<style>
.div12{
float:left;
width:100px;
height:100px;
border-radius: 50%;
background: #655;
overflow:hidden; position:relative;
}
.div12:after{
content:'';
display:table;
clear:both;
position:absolute;
top:0;bottom:0;left:0;right:0;
}
.div12 div{
position:absolute;
float:left;
width:100px;
height:100px;
border-radius: 50%;
}
.div12>div:first-child{
background-image:
linear-gradient(to right,transparent 50%, rgba(198, 179, 129, 0.94) 0); }
.div12>div:first-child:before{
content: '';
display:block;
margin-left:50%;
height:100%;
border-radius:0 100% 100% 0 /50%;
background-color:#655;
transform-origin:left;
transform: rotate(50deg);
}
.div12>div:nth-child(2){
background-image:
linear-gradient(140deg,transparent 50%, rgba(35, 198, 41, 0.94) 0);
}
.div12>div:nth-child(2):before{
content: '';
display:block;
margin-left:50%;
height:100%;
border-radius:0 100% 100% 0 /50%;
background-color:#655;
transform-origin:left;
transform: rotate(145deg);
}
</style>

CSS3实现各种图形的示例代码

饼图

12、饼图

复制代码
代码如下:

<svg width="100" height="100">
<circle r="25" cx="50" cy="50" />
</svg>
<style>
@keyframes fillup { to { stroke-dasharray: 100 100; } }
circle {
fill:yellowgreen;
stroke:#655;
stroke-width: 50;
stroke-dasharray:38 100; /* 可得到比率为38%的扇区*/
}
svg{
width:100px;height:100px;
transform:rotate(-90deg);
background:yellowgreen;
border-radius:50%;
}
</style>

CSS3实现各种图形的示例代码

饼图

13、js绘制饼图

复制代码
代码如下:

<div class="pie1">20%</div>
<div class="pie2">60%</div>
<script>
function $$(selector,context) {
context =context || document;
var elements =context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
$$('.pie1').forEach(function(pie) {
var p = parseFloat(pie.textContent);
var NS = "<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>";
var svg = document.createElementNS(NS, "svg");
var circle =document.createElementNS(NS, "circle");
var title = document.createElementNS(NS, "title");</p> <p> circle.setAttribute("r", 25); circle.setAttribute("cx",16);
circle.setAttribute("cy",16); circle.setAttribute("stroke-dasharray",p + 100);
console.log(p + 100);
svg.setAttribute("viewBox", "0 0 32 32");
title.textContent = pie.textContent;
pie.textContent = '';
svg.appendChild(title);
svg.appendChild(circle);
pie.appendChild(svg); });
</script>
<style>
@keyframes fillup { to { stroke-dasharray: 100 100; } }
.pie1 circle {
fill:yellowgreen;
stroke:#655;
stroke-width: 50;
stroke-dasharray:70 160; /* 可得到比率为38%的扇区*/
}
.pie1 svg{
width:100px;height:100px;
transform:rotate(-90deg);
background:yellowgreen;
border-radius:50%;
}
</style>

CSS3实现各种图形的示例代码

js绘制饼图

备注:这里的大多数例子,都是从LEA VEROU的《css揭秘》这本书上借鉴来的,感兴趣的童鞋不如去买这本书,简直是CSS神书,就和Js的蝴蝶一样,前端必备。

总结
以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Css3能有所帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 #HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 #HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 #HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 #HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 #HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 #HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 #HTML / CSS
You might like
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
最常用的12种设计模式小结
2011/08/09 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
用Python编写简单的定时器的方法
2015/05/02 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
python 生成图形验证码的方法示例
2018/11/11 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
python 实现屏幕录制示例
2019/12/23 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
优秀应届生推荐信
2013/11/09 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
师生聚会感言
2014/01/26 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
经济管理专业求职信
2014/06/09 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers