【01】CSS制作的图形
【01】CSS制作的图形
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>测试</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
.wrap {
position: absolute;
}
.arrow {
position: relative;
width:0;
height:0;
border-top:9px solid transparent;
border-right:9px solid #000;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
.arrow:after {
content:"";
position: absolute;
border:0 solid transparent;
border-top:3px solid #000;
border-radius:20px000;
top:-12px;
left:-9px;
width:12px;
height:12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.star-six {
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid #99CC33;
position: relative;
}
.star-six:after {
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid #99CC33;
position: absolute;
content:"";
top:30px;
left:-50px;
}
.star-five {
margin:50px0;
position: relative;
display: block;
color:#0066CC;
width:0px;
height:0px;
border-right:100px solid transparent;
border-bottom:70px solid #0066CC;
border-left:100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.star-five:before {
border-bottom:80px solid #0066CC;
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);
}
.star-five:after {
position: absolute;
display: block;
color:#0066CC;
top:3px;
left:-105px;
width:0px;
height:0px;
border-right:100px solid transparent;
border-bottom:70px solid #0066CC;
border-left:100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content:'';
}
.heart {
position: relative;
width:100px;
height:90px;
}
.heart:before,
.heart:after {
position: absolute;
content:"";
left:50px;
top:0;
width:50px;
height:80px;
background: red;
-moz-border-radius:50px50px00;
border-radius:50px50px00;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin:0100%;
-moz-transform-origin:0100%;
-ms-transform-origin:0100%;
-o-transform-origin:0100%;
transform-origin:0100%;
}
.heart: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%;
}
.infinity {
position: relative;
width:212px;
height:100px;
}
.infinity:before,
.infinity:after {
content:"";
position: absolute;
top:0;
left:0;
width:60px;
height:60px;
border:20px solid #FF33CC;
-moz-border-radius:50px50px050px;
border-radius:50px50px050px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.infinity:after {
left:auto;
right:0;
-moz-border-radius:50px50px50px0;
border-radius:50px50px50px0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.pacman {
width:0px;
height:0px;
border-right:60px solid transparent;
border-top:60px solid #FFCC00;
border-left:60px solid #FFCC00;
border-bottom:60px solid #FFCC00;
border-top-left-radius:60px;
border-top-right-radius:60px;
border-bottom-left-radius:60px;
border-bottom-right-radius:60px;
}
.yin-yang {
width:96px;
height:48px;
background:#fff;
border-color:#000;
border-style: solid;
border-width:2px2px50px2px;
border-radius:100%;
position: relative;
}
.yin-yang:before {
content:"";
position: absolute;
top:50%;
left:0;
background:#fff;
border:18px solid #000;
border-radius:100%;
width:12px;
height:12px;
}
.yin-yang:after {
content:"";
position: absolute;
top:50%;
left:50%;
background:#000;
border:18px solid #fff;
border-radius:100%;
width:12px;
height:12px;
}
</style>
</head>
<body>
<div class="wrap" style="top:30px; left:40px;">
<div class="arrow"></div>
</div>
<div class="wrap" style="top:20px; left:100px;">
<div class="star-six"></div>
</div>
<div class="wrap" style="top:20px; left:200px;">
<div class="star-five"></div>
</div>
<div class="wrap" style="top:20px; left:400px;">
<div class="heart"></div>
</div>
<div class="wrap" style="top:220px; left:100px;">
<div class="infinity"></div>
</div>
<div class="wrap" style="top:220px; left:400px;">
<div class="pacman"></div>
</div>
<div class="wrap" style="top:340px; left:200px;">
<div class="yin-yang"></div>
</div>
</body>
</html>
【01】CSS制作的图形的更多相关文章
- 【转】CSS制作图形速查表-存档
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...
- CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]
转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...
- CSS制作图形速查表
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
- 利用CSS制作图形效果
前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素.任何类型 ...
- 纯CSS制作冒泡提示框
来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...
- 18个你可能不相信是用CSS制作出来的东西
与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和交互的能力,CSS集合HTML以及JavaScrip ...
- 好程序员web前端分享18个用CSS制作出来的东西
好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
随机推荐
- 开车旅行 2012年NOIP全国联赛提高组(倍增+set)
开车旅行 2012年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 小A 和小B决定利用 ...
- AutoCAD VBA添加菜单
# 给cad添加自定义菜单 Private Sub AddBar() Dim NewMenuItem As AcadPopupMenuItem Dim TheMacro As String Dim M ...
- 二分搜索 HDOJ 2675 Equation Again
题目传送门 /* 二分搜索:式子两边取对数,将x提出来,那么另一边就是一个常数了,函数是:lnx/x.二分搜索x,注意要两次 */ #include <cstdio> #include & ...
- JSON使用讲解
前端操作json 一.JSON字符串与JSON对象的区别 1. 一个对象以“{” 开始, “}”结束. 每个“名称”后跟一个“:”(冒号):“‘名称/值’ 对”之间运用 “,”(逗号) ...
- 转 phpmyadmin操作技巧:如何在phpmyadmin里面复制mysql数据库?
对于每一个站长而言,都会遇到要进行网站测试的时候.这个时候,往往需要备份数据库.如果按照一般的操作方式,都是先把数据库导出并备份到本地,然后再服务器上测试.如果一切正常还好,一旦出了问题,就又得把数据 ...
- 1393 0和1相等串 鸽笼原理 || 化简dp公式
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1393 正解一眼看出来的应该是鸽笼原理.记录每个位置的前缀和,就是dp[i ...
- SQL在一张表中根据父ID获取所有的子ID
with a as ( select id,name,parentid from categories where id=53 union all select x.id,x.name,x.paren ...
- VC++常见错误原因解析--error LNK2019: 无法解析的外部符号 "public: void __thiscall
根据个人遇到这个错误时的记录,原因可以分为一下几种: 原因一: 只是在.h里面声明了某个方法, 没有在cpp里面实现 . 具体讲,有时候在头文件中声明了需要的方法,确实忘记了在源文件中实现: 有时候在 ...
- HTML空格占位
它叫不换行空格,全称No-Break Space,它是最常见和我们使用最多的空格,大多数的人可能只接触了 ,它是按下space键产生的空格.在HTML中,如果你用空格键产生此空格,空格是不会累加的 ...
- python--12、索引知识
MySQL索引及优化 影响性能的因素 需求:一个论坛帖子总量的统计,附加要求:实时更新.从功能上来看非常容易实现,执行一条 SELECT COUNT(*) from 表名 的 Query 就可以得到结 ...