纯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"> . ...
随机推荐
- centos7.4安装nginx
参考地址: https://blog.csdn.net/weixin_41048363/article/details/80236663 我这里没有使用阿帕奇之类的服务器,只搭建了node环境.所以并 ...
- JavaScript基础知识点总结
JavaScript----js 全栈课程-------全栈工程师 前端:信息展示,普通用户浏览---前端工程师(html+css:静态页面 js:页面的交互效果) 后台:信息管理,管理员,数据库-- ...
- .NET实现IoC
.NET里简易实现IoC 前言 在前面的篇幅中对依赖倒置原则和IoC框架的使用只是做了个简单的介绍,并没有很详细的去演示,可能有的朋友还是区分不了依赖倒置.依赖注入.控制反转这几个名词,或许知道的也只 ...
- noip模拟ernd
[题目背景]解决了第一题之后,你打开了第二题.这是一道关于树的题目,你很快想出了一个复杂度和树的直径有关的算法,可以通过所有的数据.不过,你的做法常数似乎有点大.为了更好地卡常,你决定构造一些数据来检 ...
- zk observer 节点
zk 集群中有3种节点:leader,follower,observer,其中 observer 节点没有投票权,即它不参与选举和写请求的投票. 比较 Follower 和 Observer 的代码: ...
- 八大排序算法——选择排序（动图演示 思路分析 实例代码Java 复杂度分析）
一.动图演示 二.思路分析 1. 第一个跟后面的所有数相比,如果小于(或小于)第一个数的时候,暂存较小数的下标,第一趟结束后,将第一个数,与暂存的那个最小数进行交换,第一个数就是最小(或最大的数) ...
- 实践：搭建基于Load Balancer的MySql Cluster
服务器规划: 整套系统全部在rhel5u1 server 64位版本下,由基于xen的虚拟机搭建,其中集群管理节点*2.SQL节点*2.数据节点*4.Web服务节点*2组成,其中数据节点做成2个组,每 ...
- 【转】Ubuntu英文系统下安装中文输入法
转自:https://my.oschina.net/No5stranger/blog/290026 ubuntu默认的输入法是ibus,综合网上评论,fcitx的支持者更多,而且个人感觉fcitx也的 ...
- Win10系列：C#应用控件基础15
ProgressRing控件 上一小节讲解了ProgressBar控件的使用方法,ProgressRing控件和ProgressBar控件都是用来显示应用程序当前任务的运行进度信息,区别在于Progr ...
- MapServer Tutorial——MapServer7.2.1教程学习（大纲）
MapServer Tutorial——MapServer7.2.1教程学习(大纲) 前言 最近在学习Gis方面的知识,因为电脑硬件配置偏低,顾选择MapServer入手.网上搜索MapServer系 ...