css3 绘制图形
星形:
.star-six {
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid yellow;
position: relative;
}
.star-six:after {
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid yellow;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
五角星:
.star-five {
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);
}
.star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height:;
width:;
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: 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);
content: '';
}
五边形:
.pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: purple transparent;
top:50px;
}
.pentagon:before {
content: "";
position: absolute;
height:;
width:;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent purple;
}
六边形:
.hexagon {
width: 100px;
height: 55px;
background: #6c6;
position: relative;
}
.hexagon:before {
content: "";
position: absolute;
top: -25px;
left:;
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #6c6;
}
.hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left:;
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #6c6;
}
八边形:
.octagon {
width: 100px;
height: 100px;
background: orange;
position: relative;
} .octagon:before {
content: "";
position: absolute;
top:;
left:;
border-bottom: 29px solid orange;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
height:;
} .octagon:after {
content: "";
position: absolute;
bottom:;
left:;
border-top: 29px solid orange;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
height:;
}
心形:
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top:;
width: 50px;
height: 80px;
background: red;
-moz-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%;
}
.heart:after {
left:;
-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%;
}
梯形:
.triangle {
border-bottom: 100px solid #F36823;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height:;
width: 100px;
}
css3 绘制图形的更多相关文章
- 用CSS3绘制图形
参考资料:http://blog.csdn.net/fense_520/article/details/37892507 本文非转载,为个人原创,转载请先联系博主,谢谢~ 准备: <!DOCTY ...
- CSS图形基础:纯CSS绘制图形
为了在页面中利用CSS3绘制图形,在页面中定义 <div class="container"> <div class="shape"> ...
- css3之图形绘制
由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- CSS3绘制六边形
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- CSS3绘制旋转的太极图案(一)
实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...
- html5 canvas 笔记一(基本用法与绘制图形)
<canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...
- WPF2D绘制图形方法
我们先看看效果如何: xaml文件: <Window x:Class="WPF2D绘制图形方法.MainWindow" xmlns="http://schemas. ...
随机推荐
- Mina源码阅读笔记(七)—Mina的拦截器FilterChain
Filter我们很熟悉,在Mina中,filter chain的用法也类似于Servlet的filters,这种拦截器的设计思想能够狠轻松的帮助我们实现对资源的统一处理.我们先大致连接下mina中的f ...
- obj-c编程08:分类和协议
篇文章里我们来聊聊如何扩展一个类的方法和实例变量,我们首先来看一下命名分类如何扩展一个类.在下面的代码中,首先定义一个类Player用来定义普通球员,如果第三方开发者发现普通球员缺少了一些方法,则可以 ...
- Mac OS X 10.10优胜美地如何完美接管iphone上的电话和短信
自从今年苹果第一次的发布会上毛猫就特别注意这个功能,感觉特别Cool,特别方便.但直到今天毛猫才第一次成功测试出这个功能呀!虽然handoff功能还未测出来,但是觉得在mac上发短信和打电话也已经足够 ...
- PuTTY的下载安装和基本使用方法教程
PuTTY是一款开源(Open Source Software)的连接软件,主要由Simon Tatham维护,使用MIT许可证授权.包含的组件有:PuTTY, PuTTYgen,PSFTP, PuT ...
- 《深入理解Java虚拟机》读书笔记3--垃圾回收算法
转载:http://blog.csdn.net/tjiyu/article/details/53983064 下面先来了解Java虚拟机垃圾回收的几种常见算法:标记-清除算法.复制算法.标记-整理算法 ...
- Convert Sorted Array to Binary Search Tree(将一个有序数组转换成一颗二叉搜索树)
Given an array where elements are sorted in ascending order, convert it to a height balanced BST. Fo ...
- 如何写jquery插件
首页 新文章 联系 管理 订阅 自己写一个 jQuery 插件 我知道这一天终将会到来,现在,它来了. 需求 开发 SharePoint 的 CSOM 应用时,经常需要在网页上输出一 ...
- linux上安装redis的踩坑过程
redis用处很广泛,我不再啰嗦了,我按照网上教程想在linux上安装下,开始了踩坑过程,网上买了一个linux centos7.3,滴滴云的,巨坑无比啊,不建议大家用这家的! redis 为4.0, ...
- 做双网卡绑定_______物理机在双网卡的情况下做多IP绑定
公司的环境是这样的: 一台物理机需要做双网卡绑定,同时呢,在双网卡绑定的同时还要做多IP. 其实整个过程可以分为两个步骤: 第一个,物理机先做双网卡. 第二个,在bond上做多IP实例. 双网卡绑定的 ...
- geth常用指令
ubuntu下载: https://github.com/ethereum/go-ethereum/wiki/Installation-Instructions-for-Ubuntu sudo apt ...