纯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"> . ...
随机推荐
- GANs用于文本生成
上学期期末老师给了我本杂志让我好好看看里面的Gans网络是如何应用在文本生成上的,文章里面也没有介绍原理性的东西,只是说了加入这个Gans模型后效果有多好,给出了模型架构图和训练时所用的语料例子,也没 ...
- Aircrack-ng破解WPA/WPA2加密WiFi教程（Kali）
一.说明 以前学Kali,很多人都笑赞“WiFi破解神器”.我很烦,一是我不会破解二是我觉得他们也不会破解三是我隐约觉得所谓的WiFi破解不是什么技术性的操作. 后来基础知识充分了然后弄了个无线网卡, ...
- 20175227张雪莹 2018-2019-2 《Java程序设计》第四周学习总结
20175227张雪莹 2018-2019-2 <Java程序设计>第四周学习总结 教材学习内容总结 一.子类和父类. 1.子类只继承父类中的protected和public访问权限的成员 ...
- oracle中日期类型 to_date 和to_timestamp什么区别啊？
1.to_date() 和to_timestamp()区别 由于oracle中date类型只支持到秒,不支持到毫秒,所以to_date()不能取到毫秒.如果要取到毫秒,oracle 9i以上版本,可以 ...
- windows线程池
#define _WIN32_DCOM #include <SDKDDKVer.h> #include <direct.h> #include <thr/threads. ...
- nginx优化参考
参考链接:http://blog.sina.com.cn/s/blog_4f9fc6e10102uxib.html 计算访问路径频度 awk -r|more |grep /路径 ps print &a ...
- jvm内存溢出问题
Java内存溢出详解 一.常见的Java内存溢出有以下三种: 1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap(堆)溢出 J ...
- Alpha 冲刺11——总结
拖鞋旅游队团队事后诸葛亮会议 前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10054510.html 时间:2018-12-1 20:00 地 ...
- L337 Should We Relax About Screen Time?
The UK government's plans for regulation of the internet and social media contained a long list of o ...
- 周强 201771010141 《面向对象程序设计（java）》第七周学习总结
实验目的与要求 (1)进一步理解4个成员访问权限修饰符的用途: (2)掌握Object类的常用API用法: (3)掌握ArrayList类用法与常用API: (4)掌握枚举类使用方法: (5)结合本章 ...