纯CSS制作图形效果
下面所有的例子都是在demo.html的基础上添加相关样式实现的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.demo{
margin:100px auto;
}
</style>
</head>
<body>
<div class="demo"> </div>
</body>
</html>
正方形
.demo{width:100px;height:100px;background:red;}
长方形
.demo{width:100px;height:150px;background:red;}
圆形
.demo{width:100px;height:100px;background:red;border-radius:50%;}
半圆
.demo{width:100px;height:50px;background:red;border-radius:100px 100px 0 0 ;}
.demo{background:none repeat scroll 0 0 red;border-radius:50px 0 0 0;height:50px;width:50px;}
椭圆
.demo{width:200px;height:100px;border-radius:100px / 50px;background:red;}
.demo{width:0;height:0;border:50px solid red;border-color:transparent transparent red;}
.demo{width:0;height:0;border:50px solid red;border-color:red transparent transparent;}
.demo{width:0;height:0;border:50px solid red;border-color: transparent red transparent transparent;}
.demo{width:0;height:0;border:50px solid red;border-color: transparent transparent transparent red;}
.demo{width:0px;height:0px;border:100px solid red;border-color:red transparent transparent red;}
平行四边形
.demo{width:150px;height:100px;transform:skew(20deg);background:red;}
梯形
.demo{height:0;width:100px;border-bottom:100px solid #e5c3b2;border-left:60px solid transparent;border-right:60px solid transparent;}
梯形
图表
.demo{height:0px;width:0px;border:50px solid red;border-radius:50px;border-color:purple red yellow orange;}
.demo{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid red;
position:relative;
}
.demo:after{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid red;
position:absolute;
content:"";
top:30px;
left:-50px;
}
.demo{
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
.demo: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: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.demo:after{
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
transform: rotate(-70deg);
content: '';
}
.demo{
width:0;
height:100px;
border-left:50px solid red;
border-right:50px solid red;
border-bottom:35px solid transparent;
}
心形
.demo{
position: relative;
width: 100px;
height: 90px;
}
.demo:before,.demo:after{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
-webkit-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg); -
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.demo:after{
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
.demo{
width: 0px;
height: 0px;
border: 60px solid red;
border-color: red transparent red red ;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.demo{
width:120px;
height:80px;
background:red;
position:relative;
border-radius:10px;
}
.demo:before{
content:'';
position:absolute;
right:100%;
top:26px;
width:0;
height:0;
border-top:13px solid transparent;
border-right:26px solid red;
border-bottom:13px solid transparent;
}
.demo{
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
.demo:before,.demo:after{
content: "";
position: absolute;
top: 0; left: 0;
height: 80px;
width: 80px;
background: red;
}
.demo:before{
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.demo:after{
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.demo{
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
.demo:before{
content: "";
position:
absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
.demo:after{
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
纯CSS制作图形效果的更多相关文章
- 利用CSS制作图形效果
前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素.任何类型 ...
- 如何使用纯CSS制作特效导航条？
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 【转】CSS制作图形速查表-存档
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- 纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
- No.5 - 纯 CSS 制作绕中轴旋转的立方体
body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...
- 纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- 每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...
随机推荐
- 理解SQL的左连接与右连接
假设有A,B两个表. 表A记录如下: aID aNum 1 a20050111 2 a20050112 3 a20050113 4 a20050114 5 a20050115 表B记录如下: bID ...
- 977. Squares of a Sorted Array有序数组的平方
网址:https://leetcode.com/problems/squares-of-a-sorted-array/ 双指针法 把左端的元素和右端的元素比较后挑出绝对值大的,将其平方放入ans中,并 ...
- Python3+qrcode+zxing生成和识别二维码教程
一.安装依赖库 pip install qrcode pillow image zxing pillow是python3中PIL的代替库,image是生成图版需要用到的库 安装image时报错“Cou ...
- laravel 微信小程序登录 加密解密扩展包
https://github.com/lanceWan/wxxcx 测试的时候一定要保证服务器的 appid 和客户端的appid一致 如果是切换测试 那么需要把本地的项目从微信小程序上面删除掉 再 ...
- 诡异的bug！！
在我些项目的时候,命名从来没有用过 font 元素,但是打开 Chrome 浏览器查看元素时,总是 font 元素???而且写的 <span class= "xxx"> ...
- UVa 11134 - Fabled Rooks 优先队列，贪心 难度: 0
题目 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...
- tensorFlow（四）浅层神经网络
tensorFlow见基础 实验 MNIST数据集介绍 MNIST是一个手写阿拉伯数字的数据集. 其中包含有60000个已经标注了的训练集,还有10000个用于测试的测试集. 本次实验的任务就是通过手 ...
- Forth 采用CODE定义新词
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- 原生js手风琴效果
//js代码 //获取li var list = document.getElementsByTagName("li")[0]; //遍历 排他 for( var i=0;i&l ...
- php加密
域名授权函数 function allow_doamin(){ $is_allow=false; $url=trim($_SERVER['SERVER_NAME']); $arr_a ...