纯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"> . ...
随机推荐
- 『TensorFlow』读书笔记_SoftMax分类器
开坑之前 今年3.4月份的时候就买了这本书,同时还买了另外一本更为浅显的书,当时读不懂这本,所以一度以为这本书很一般,前些日子看见知乎有人推荐它,也就拿出来翻翻看,发现写的的确蛮好,只是稍微深一点,当 ...
- loj#2059. 「TJOI / HEOI2016」字符串 sam+线段树合并+倍增
题意:给你一个子串,m次询问,每次给你abcd,问你子串sa-b的所有子串和子串sc-d的最长公共前缀是多长 题解:首先要求两个子串的最长公共前缀就是把反过来插入变成最长公共后缀,两个节点在paren ...
- ALV基础二：ALV的扩展功能
https://www.cnblogs.com/sapSB/p/8532072.html 参考这个,做扩展,有些人喜欢用OO ALV有些喜欢用普通的CALL FUNC ALV...我只用LVC... ...
- linux学习--目录处理命令
- UVa 11100 - The Trip, 2007 难度: 0
题目 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...
- 兼容性 memo
一.async 与 defer <script src="js/require.js" defer async="true" ></scrip ...
- Discuz!安装搭建
Discuz!介绍 Discuz!是一款由php语言开发的论坛源代码包,运行在lamp平之上或者lnmp之上,点击此处打开官方网站 环境介绍 本次安装采用最简配置,全部用yum安装,php采用模块方式 ...
- VirtualBox安装CENTOS7.3常见问题
1 DHCP 问题无法上网解决 :sudo dhclient 2 安装宝塔面板:yum install -y wget && wget -O install.sh http://dow ...
- centos7.3 64位 安装git
1.安装编译git时需要的包 # yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel # yum ins ...
- CentOS 7 命令行安装TeamViewer
由于要通过要远程登录到内网的电脑(一台笔记本),用于在紧急情况下处理服务器故障.刚开始准备使用ssh端口转发,无奈vps转发速度太慢. 后面考虑使用TeamViewer远程控制Windows桌面,但是 ...