CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。

圆形

圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可

#circle {

    width: 120px;

    height: 120px;

    background: #7fee1d;

    -moz-border-radius: 60px;

    -webkit-border-radius: 60px;

    border-radius: 60px;

}

<div id="circle"></div>

正方形

正方形的CSS样式只需要设置相同的宽度和高度即可

#square {

    width: 120px;

    height: 120px;

    background: #f447ff;

}

<div id="square"></div>

长方形

与正方形不同的是，长方形的长度和高度为不同的值

#rectangle {

    width: 220px;

    height: 120px;

    background: #4da1f7;

}

<div id="rectangle"></div>

椭圆形

设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变

#oval {

    width: 200px;

    height: 100px;

    background: #e9337c;

    -webkit-border-radius: 100px / 50px;

    -moz-border-radius: 100px / 50px;

    border-radius: 100px / 50px;

}

<div id="oval"></div>

三角形

要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0

#triangle {

    width: 0;

    height: 0;

    border-bottom: 140px solid #fcf921;

    border-left: 70px solid transparent;

    border-right: 70px solid transparent;

}

<div id="triangle"></div>

倒三角

与正三角形不同的是，倒三角形要设置的是border-top、border-left和border-right三条边的属性。另外，在制作三角形时，宽度和高度要设置为0

#triangle {

    width: 0;

    height: 0;

    border-top: 140px solid #20a3bf;

    border-left: 70px solid transparent;

    border-right: 70px solid transparent;

}

左三角

#triangle {

    width: 0;

    height: 0;

    border-top: 70px solid transparent;

    border-right: 140px solid #6bbf20;

    border-bottom: 70px solid transparent;

}

右三角

#triangle {

    width: 0;

    height: 0;

    border-top: 70px solid transparent;

    border-left: 140px solid #ff5a00;

    border-bottom: 70px solid transparent;

}

菱形

制作菱形的方法有很多种。这里使用的是transform属性的rotate

#diamond {

    width: 120px;

    height: 120px;

    background: #1eff00;

　　/* Rotate */

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

　　/* Rotate Origin */

    -webkit-transform-origin: 0 100%;

    -moz-transform-origin: 0 100%;

    -ms-transform-origin: 0 100%;

    -o-transform-origin: 0 100%;

    transform-origin: 0 100%;

    margin: 60px 0 10px 310px;

}

<div id="diamond"></div>

平行四边形

平行四边形的制作方式是使用transform属性使长方形倾斜一个角度

#parallelogram {

    width: 160px;

    height: 100px;

    background: #8734f7;

    -webkit-transform: skew(30deg);

    -moz-transform: skew(30deg);

    -o-transform: skew(30deg);

    transform: skew(30deg);

}

<div id="parallelogram"></div>

星形

星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边

#star {

    width: 0;

    height: 0;

    margin: 50px 0;

    color: #fc2e5a;

    position: relative;

    display: block;

    border-right: 100px solid transparent;

    border-bottom: 70px solid #fc2e5a;

    border-left: 100px solid transparent;

    -moz-transform: rotate(35deg);

    -webkit-transform: rotate(35deg);

    -ms-transform: rotate(35deg);

    -o-transform: rotate(35deg);

}

#star:before {

    height: 0;

    width: 0;

    position: absolute;

    display: block;

    top: -45px;

    left: -65px;

    border-bottom: 80px solid #fc2e5a;

    border-left: 30px solid transparent;

    border-right: 30px solid transparent;

    content: '';

    -webkit-transform: rotate(-35deg);

    -moz-transform: rotate(-35deg);

    -ms-transform: rotate(-35deg);

    -o-transform: rotate(-35deg);

}

#star:after {

    content: '';

    width: 0;

    height: 0;

    position: absolute;

    display: block;

    top: 3px;

    left: -105px;

    color: #fc2e5a;

    border-right: 100px solid transparent;

    border-bottom: 70px solid #fc2e5a;

    border-left: 100px solid transparent;

    -webkit-transform: rotate(-70deg);

    -moz-transform: rotate(-70deg);

    -ms-transform: rotate(-70deg);

    -o-transform: rotate(-70deg);

}

<div id="star"></div>

六角星形

和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们

#star_six_points {

    width: 0;

    height: 0;

    display: block;

    position: absolute;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid #de34f7;

    margin: 10px auto;

}

#star_six_points:after {

    content: "";

    width: 0;

    height: 0;

    position: absolute;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 100px solid #de34f7;

    margin: 30px 0 0 -50px;

} 

<div id="star_six_points"></div>

五边形

创建CSS五边形需要结合两个图形：一个梯形，然后在它的上面放一个三角形，共同组成一个五边形

#pentagon {

    width: 54px;

    position: relative;

    border-width: 50px 18px 0;

    border-style: solid;

    border-color: #277bab transparent;

}

#pentagon:before {

    content: "";

    height: 0;

    width: 0;

    position: absolute;

    top: -85px;

    left: -18px;

    border-width: 0 45px 35px;

    border-style: solid;

    border-color: transparent transparent #277bab;

}

<div id="pentagon"></div>

六边形

六边形的制作方法可以有很多种，可以像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形

#hexagon {

    width: 100px;

    height: 55px;

    background: #fc5e5e;

    position: relative;

    margin: 10px auto;

}

#hexagon:before {

    content: "";

    width: 0;

    height: 0;

    position: absolute;

    top: -25px;

    left: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 25px solid #fc5e5e;

}

#hexagon:after {

    content: "";

    width: 0;

    height: 0;

    position: absolute;

    bottom: -25px;

    left: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 25px solid #fc5e5e;

}

<div id="hexagon"></div>

八角形

#octagon {

    width: 100px;

    height: 100px;

    background: #ac60ec;

    position: relative;

}

#octagon:before {

    content: "";

    width: 42px;

    height: 0;

    position: absolute;

    top: 0;

    left: 0;

    border-bottom: 29px solid #ac60ec;

    border-left: 29px solid #f4f4f4;

    border-right: 29px solid #f4f4f4;

}

#octagon:after {

    content: "";

    width: 42px;

    height: 0;

    position: absolute;

    bottom: 0;

    left: 0;

    border-top: 29px solid #ac60ec;

    border-left: 29px solid #f4f4f4;

    border-right: 29px solid #f4f4f4;

}

<div id="octagon"></div>

心形

心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点

#heart {

    position: relative;

}

#heart:before,#heart:after {

    content: "";

    width: 70px;

    height: 115px;

    position: absolute;

    background: red;

    left: 70px;

    top: 0;

    -webkit-border-radius: 50px 50px 0 0;

    -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: 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%;

}

<div id="heart"></div>

蛋形

蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形

#egg {

    width: 136px;

    height: 190px;

    background: #ffc000;

    display: block;

    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}

<div id="egg"></div>

无穷符号

无穷符号可以通过border属性和设置伪元素的角度来实现

#infinity {

    width: 220px;

    height: 100px;

    position: relative;

}

#infinity:before,#infinity:after {

    content: "";

    width: 60px;

    height: 60px;

    position: absolute;

    top: 0;

    left: 0;

    border: 20px solid #06c999;

    -moz-border-radius: 50px 50px 0;

    border-radius: 50px 50px 0 50px;

    -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: 50px 50px 50px 0;

    border-radius: 50px 50px 50px 0;

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

}

<div id="infinity"></div>

消息框

消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形

#comment_bubble {

    width: 140px;

    height: 100px;

    background: #088cb7;

    position: relative;

    -moz-border-radius: 12px;

    -webkit-border-radius: 12px;

    border-radius: 12px;

}

#comment_bubble:before {

    content: "";

    width: 0;

    height: 0;

    right: 100%;

    top: 38px;

    position: absolute;

    border-top: 13px solid transparent;

    border-right: 26px solid #088cb7;

    border-bottom: 13px solid transparent;

}

<div id="comment_bubble></div>

吃豆人

吃豆人的制作方法是先在一个圆形里面制作一个透明的三角形

#pacman {

    width: 0;

    height: 0;

    border-right: 70px solid transparent;

    border-top: 70px solid #ffde00;

    border-left: 70px solid #ffde00;

    border-bottom: 70px solid #ffde00;

    border-top-left-radius: 70px;

    border-top-right-radius: 70px;

    border-bottom-left-radius: 70px;

    border-bottom-right-radius: 70px;

}

<div id="pacman"></div>

使用CSS3制作各种形状的更多相关文章

CSS3制作各种形状图像（转）
CSS3制作各种形状图像浏览:1417 | 更新:2015-05-24 14:43 | 标签:css 1 2 3 4 5 6 7 分步阅读圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形- ...
CSS3制作各种形状图像
圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框不废话直接 html界面(亲测的) ------转自百 ...
纯CSS3制作卡通场景汽车动画效果
前言今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
CSS3制作的垂直口风琴1
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程首先,当有人说你能不能 ...
css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来 ...
详解用CSS3制作圆形滚动进度条动画效果
主题今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
CSS3制作心形头像
1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...
使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...

随机推荐

Appium 滑动界面swipe用法
Appium 滑动API:Swipe(int start x,int start y,int end x,int y,duration) 解释:int start x-开始滑动的x坐标, int st ...
git 因线上分支名重复导致无法拉取代码
有时 git pull 或 git fetch 时发现 git 报了个异常,说法像是无法将线上某个分支与本地分支合并,由于分支是...(很长的hash)但是分支却是...(很长的hash) 仔细查查后 ...
Eclipse下JRebel的安装和基本使用
JRebel有什么用? 做Java Web开发,一个很头疼的事情是,修改了一个类以后,Tomcat必须重新启动. 工程规模小还好说,如果规模大了,重启一次动不动就是一分多钟.那么频繁重启就会导致大量的 ...
查看Linux网卡地址，网络地址
查看网络地址 ip a 或ip addr show 或ifconfig,此指令在部分linux系统中不支持
两台windows内网之间快速复制大量（上百万个）小文件（可用于两台服务器之间）
用各种FTP工具(各种主动被动)都不好使.经测试,用以下的(协议.工具等),在双千兆网卡下,传输大量1M的文件可以达到每秒60多M: windows文件共享(SMB协议)(若是08 r2 数据中心版, ...
VScode中的golang代码规范太严格，怎么处理。
在vscode的配置文件settings.json中,加入下面的配置,一般设置为0.8即可. "go.lintFlags": [ "-min_confidence=.8& ...
selenium使用谷歌浏览器自带手机模拟器运行H5网页
背景:最开始用手机模拟H5页面跑自动化,发现经常因为app连接或者网络原因等一系列情况,导致M版(H5页面)用例跑不通,想通过浏览器自带的手机模拟器运行,保证稳定性浏览器自带的模拟器如下图: 代码实 ...
POJ-3274 Gold Balanced Lineup---hash经典题！
题目链接: https://vjudge.net/problem/POJ-3274 题目大意: 给定多头牛的属性,每头牛的属性由一个非负数表示,该数的二进制表示不会超过K位,它的二进制表示的每一位若为 ...
测试 jdbc 中连接关闭的时机
测试 jdbc 中连接关闭的时机写一段程序,测试 jdbc 连接的关闭情况 /** * 测试 jdbc 连接的关闭情况 */ public static void testOpenCon(){ // ...
lintcode_69_二叉树的层次遍历
二叉树的层次遍历描述笔记数据评测给出一棵二叉树,返回其节点值的层次遍历(逐层从左往右访问) 您在真实的面试中是否遇到过这个题? Yes 哪家公司问你的这个题? LinkedIn Airb ...

使用CSS3制作各种形状

圆形

正方形

长方形

椭圆形

三角形

倒三角

左三角

右三角

菱形

平行四边形

星形

六角星形

五边形

六边形

八角形

心形

蛋形

无穷符号

消息框

吃豆人

使用CSS3制作各种形状的更多相关文章

随机推荐

热门专题