转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet

前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单,方便大家急用时有地方可查。别的不多说了,直接看代码。

为了节省时间,下面图形都采用的一个标签,可以是块元素也可以是行内元素,不过行内元素需要加上“display:block;”,唯一不同的是,在此用了不同的类名来区别,相关类名我放在了标题的后面,以便大家对应查看。

1、正方形(square):

CSS Code:

  1. .square {
  2. width: 100px;
  3. height:100px;
  4. background: #E5C3B2;
  5. }

上面的方法是,设置宽度和高度一致就可以实现正方形的效果,下面展示一种boder制作正方形的效果:

  1. .square {
  2. width:0;
  3. height:0;
  4. border: 50px solid  #E5C3B2;/*边框大小等于正方形宽度(或高度)的一半*/
  5. }

效果:

2、平行四边形(parallelogram)

CSS Code:

  1. .parallelogram {
  2. width: 100px;
  3. height: 70px;
  4. -webkit-transform: skew(20deg);
  5. -moz-transform: skew(20deg);
  6. -o-transform: skew(20deg);
  7. -ms-transform: skew(20deg);
  8. transform: skew(20deg);
  9. background: #E5C3B2;
  10. }

效果:

我们可以通过“skew”的值大小来控制角度,如果其值为负值,将会改变扭曲方向:

  1. .parallelogram2 {
  2. width:100px;
  3. height:70px;
  4. -webkit-transform:skew(-20deg);
  5. -moz-transform:skew(-20deg);
  6. -o-transform:skew(-20deg);
  7. -ms-transform:skew(-20deg);
  8. transform:skew(-20deg);
  9. background:#E5C3B2;
  10. }

效果:

3、菱形(diamond)

CSS Code:

  1. .diamond {
  2. width:80px;
  3. height:80px;
  4. margin:40px 0 0 40px;
  5. -webkit-transform-origin:0 100%;
  6. -moz-transform-origin:0 100%;
  7. -o-transform-origin:0 100%;
  8. -ms-transform-origin:0 100%;
  9. transform-origin:0 100%;
  10. -webkit-transform:rotate(-45deg);
  11. -moz-transform:rotate(-45deg);
  12. -o-transform:rotate(-45deg);
  13. -ms-transform:rotate(-45deg);
  14. transform:rotate(-45deg);
  15. background:#E5C3B2;
  16. }

效果:

4、长方形()

CSS Code:

  1. .rectangle {
  2. width:100px;
  3. height:50px;
  4. background:#E5C3B2;
  5. }

效果:

5、梯形(trapezoid)

梯形一

CSS Code:

  1. .trapezoid-1 {
  2. height:0;
  3. width:100px;
  4. border-bottom:100px solid #e5c3b2;
  5. border-left:60px solid transparent;
  6. border-right:60px solid transparent;
  7. }

效果:

梯形二

CSS Code:

  1. .trapezoid-2 {
  2. height:0;
  3. width:100px;
  4. border-top:100px solid #e5c3b2;
  5. border-left:60px solid transparent;
  6. border-right:60px solid transparent;
  7. }

效果:

梯形三

CSS Code:

  1. .trapezoid-3 {
  2. height:100px;
  3. width:0;
  4. border-right:100px solid #e5c3b2;
  5. border-top:60px solid transparent;
  6. border-bottom:60px solid transparent;
  7. }

效果:

梯形四

CSS Code:

  1. .trapezoid-4 {
  2. height:100px;
  3. width:0;
  4. border-left:100px solid #e5c3b2;
  5. border-top:60px solid transparent;
  6. border-bottom:60px solid transparent;
  7. }

效果:

6、三角形(triangle)

三角形朝上

CSS Code:

  1. .triangle-up {
  2. height:0;
  3. width:0;
  4. border:50px solid #e5c3b2;
  5. border-color:transparent transparent #e5c3b2 transparent;
  6. }

效果:

三角朝右

CSS Code:

  1. .triangle-rihgt {
  2. height:0;
  3. width:0;
  4. border:50px solid #e5c3b2;
  5. border-color:transparent  transparent transparent #e5c3b2;
  6. }

效果:

三角朝下

CSS Code:

  1. .triangle-down {
  2. height:0;
  3. width:0;
  4. border:50px solid #e5c3b2;
  5. border-color:#e5c3b2 transparent  transparent transparent;
  6. }

效果:

三角朝左

CSS Code:

  1. .triangle-left {
  2. height:0;
  3. width:0;
  4. border:50px solid #e5c3b2;
  5. border-color:transparent #e5c3b2 transparent transparent;
  6. }

效果:

7、半圆(semicircle)

上半圆

CSS Code:

  1. .semicircle-top {
  2. background:#e5c3b2;
  3. height:25px;
  4. width:50px;
  5. -moz-border-radius:50px 50px 0 0;
  6. -webkit-border-radius:50px 50px 0 0;
  7. border-radius:50px 50px 0 0;
  8. }

效果:

右半圆

CSS Code:

  1. .semicircle-right {
  2. background:#e5c3b2;
  3. height:50px;
  4. width:25px;
  5. -moz-border-radius:0 0px 50px 0;
  6. -webkit-border-radius:0 50px 50px 0;
  7. border-radius:0 50px 50px 0;
  8. }

效果:

下半圆

CSS Code:

  1. .semicircle-down {
  2. background:#e5c3b2;
  3. height:25px;
  4. width:50px;
  5. -moz-border-radius:0 0 50px 50px;
  6. -webkit-border-radius:0 0 50px 50px;
  7. border-radius:0 0 50px 50px;
  8. }

效果:

左半圆

CSS Code:

  1. .semicircle-left {
  2. background:#e5c3b2;
  3. height:50px;
  4. width:25px;
  5. -moz-border-radius:50px 0 0 50px;
  6. -webkit-border-radius:50px 0 0 50px;
  7. border-radius:50px 0 0 50px;
  8. }

效果:

8、圆(circle)

CSS Code:

  1. .circle {
  2. background:#e5c3b2;
  3. height:50px;
  4. width:50px;
  5. -moz-border-radius:25px;
  6. -webkit-border-radius:25px;
  7. border-radius:25px;
  8. }

效果:

9、椭圆(oval)

水平椭圆

CSS Code:

  1. .ovalHor {
  2. background:#e5c3b2;
  3. height:40px;
  4. width:80px;
  5. -moz-border-radius:40px/20px;
  6. -webkit-border-radius:40px/20px;
  7. border-radius:40px/20px;
  8. }

效果:

垂直椭圆

CSS Code:

  1. .ovalVert {
  2. background:#e5c3b2;
  3. height:80px;
  4. width:40px;
  5. -moz-border-radius:20px/40px;
  6. -webkit-border-radius:20px/40px;
  7. border-radius:20px/40px;
  8. }

效果:

10、表图(chartColorful)

CSS Code:

  1. .chartColorful {
  2. height:0px;
  3. width:0px;
  4. border:50px solid red;
  5. border-color:purple red yellow orange;
  6. -moz-border-radius:50px;
  7. -webkit-border-radius:50px;
  8. border-radius:50px;
  9. }

效果:

11、四分之一圆(quarterCircle)

四分之一圆(上)

CSS Code:

  1. .quarterCircleTop {
  2. background:#e5c3b2;
  3. height:50px;
  4. width:50px;
  5. -moz-border-radius:50px 0 0 0;
  6. -webkit-border-radius:50px 0 0 0;
  7. border-radius:50px 0 0 0;
  8. }

效果:

四分之一圆(右)

CSS Code:

  1. .quarterCircleRight {
  2. background:#e5c3b2;
  3. height:50px;
  4. width:50px;
  5. -moz-border-radius:0 50px 0 0;
  6. -webkit-border-radius:0 50px 0 0;
  7. border-radius:0 50px 0 0;
  8. }

效果:

四分之一圆(下)

CSS Code:

  1. .quarterCircleBottom {
  2. background:#e5c3b2;
  3. height:50px;
  4. width:50px;
  5. -moz-border-radius:0  0 50px 0;
  6. -webkit-border-radius:0  0 50px 0;
  7. border-radius:0  0 50px 0;
  8. }

效果:

四分之一圆(左)

CSS Code:

  1. .quarterCircleLeft {
  2. background:#e5c3b2;
  3. height:50px;
  4. width:50px;
  5. -moz-border-radius:0  0 0 50px;
  6. -webkit-border-radius:0  0 0 50px;
  7. border-radius:0  0 0 50px;
  8. }

效果:

12、Chart(quarterCircle)

Chart(上)

CSS Code:

  1. .chartTop {
  2. height:0px;
  3. width:0px;
  4. border:50px solid #e5c3b2;
  5. border-top-color:transparent;
  6. -moz-border-radius:50px;
  7. -webkit-border-radius:50px;
  8. border-radius:50px;
  9. }

效果:

Chart(右)

CSS Code:

  1. .chartRight {
  2. height:0px;
  3. width:0px;
  4. border:50px solid #e5c3b2;
  5. border-right-color:transparent;
  6. -moz-border-radius:50px;
  7. -webkit-border-radius:50px;
  8. border-radius:50px;
  9. }

效果:

Chart(下)

CSS Code:

  1. .chartBottom {
  2. height:0px;
  3. width:0px;
  4. border:50px solid #e5c3b2;
  5. border-bottom-color:transparent;
  6. -moz-border-radius:50px;
  7. -webkit-border-radius:50px;
  8. border-radius:50px;
  9. }

效果:

Chart(左)

CSS Code:

  1. .chartLeft {
  2. height:0px;
  3. width:0px;
  4. border:50px solid #e5c3b2;
  5. border-left-color:transparent;
  6. -moz-border-radius:50px;
  7. -webkit-border-radius:50px;
  8. border-radius:50px;
  9. }

效果:

13、心形(heart)

左心形

CSS Code

  1. .heartLeft {
  2. width:0;
  3. height:0;
  4. border-color:red;
  5. border-style:dotted;
  6. border-width:0 40px 40px 0;
  7. }

效果:

右心形

CSS Code

  1. .heartRight {
  2. width:0;
  3. height:0;
  4. border-color:red;
  5. border-style:dotted;
  6. border-width:0  0 40px 40px;
  7. }

效果:

14、彩带(ribbon)

CSS Code

  1. .ribbon {
  2. width:0;
  3. height:100px;
  4. border-left:50px solid red;
  5. border-right:50px solid red;
  6. border-bottom:35px solid transparent
  7. }

效果:

画心:

<div class="heart-shape"></div>
.heart-shape {
position: relative;
width: 50px;
height: 50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color:#f00;
margin-top: 50px;
}
.heart-shape:before,
.heart-shape:after {
position: absolute;
width: 50px;
height: 50px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: #f00;
}
.heart-shape:before {
bottom: 0px;
left: -26px;
}
.heart-shape:after {
top: -26px;
right: 0px;
}

上面就用CSS制作的32种图形效果,当然大家还可以发挥你的想像和创造,制作一些更精美的图形。

CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]的更多相关文章

  1. css 制作圆角、圆形图形布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css制作的61种图像

    HTML: <!DOCTYPE html> <html> <head> <title>css各种形状</title> <link re ...

  3. CSS制作图形速查表

    很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...

  4. 【转】CSS制作图形速查表-存档

      http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...

  5. CSS3实现32种基本图形

    CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...

  6. 160419、CSS3实现32种基本图形

    CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...

  7. 利用CSS制作图形效果

    前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型 ...

  8. 【01】CSS制作的图形

    [01]CSS制作的图形   绘制五角星:   通过border绘制三角形.然后通过transfrom来旋转35度. 绘制对称的图形,最后绘制顶部的三角形即可.   元素本身,加上:before和:a ...

  9. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

随机推荐

  1. SPSS超详细操作:分层回归(hierarchical multiple regression)

    SPSS超详细操作:分层回归(hierarchical multiple regression) 1.问题与数据 最大携氧能力(maximal aerobic capacity, VO2max)是评价 ...

  2. ArduinoUno和Leonardo的区别

    学习过Arduino的同学对ArduinoUno和Lenardo的不同点会有所了解,但说起具体的区别估计还是很多人答不上来,今天我们就详细解释下Arduino Uno和Leonardo的不同. 我们从 ...

  3. java加拼音的工具 pinyinutil

    <!--汉字转拼音--> <dependency> <groupId>com.belerweb</groupId> <artifactId> ...

  4. AIO异步非阻塞学习

    Client:客户端 package aio; import java.io.UnsupportedEncodingException; import java.net.InetSocketAddre ...

  5. C# Predicate委托

    Predicate在集合搜索和WPF数据绑定中用途广泛,其调用形式: 调用形式:Predicate<object>(Method)/Predicate<参数类型>(方法) 1. ...

  6. Gym - 102021E

    Gym - 102021Ehttps://vjudge.net/problem/2109787/origin主要是一个处理精度的技巧,避免精度误差可以加eps,然后乘1e(小数点之后的位数). #in ...

  7. 快速傅里叶变换(FFT)学习

    首先,在写这篇博客之前,我还没有完全学会FFT. 先把会的部分打好,加深一下记忆(也可以说是做笔记吧). 初三了,还不会FFT,要退役喽-- 多项式乘法 点开这篇博客之前,你就应该知道,FFT是用来求 ...

  8. Django项目:CRM(客户关系管理系统)--60--50PerfectCRM实现CRM客户报名流程学生合同URL随机码

    # sales_urls.py # ————————47PerfectCRM实现CRM客户报名流程———————— from django.conf.urls import url from bpm. ...

  9. dubbo入门学习(五)-----dubbo的高可用

    zookeeper宕机与dubbo直连 现象 zookeeper注册中心宕机,还可以消费dubbo暴露的服务. 原因 健壮性 l 监控中心宕掉不影响使用,只是丢失部分采样数据 l 数据库宕掉后,注册中 ...

  10. java连接达梦数据库的简单代码

    1. 引用DmJdbcDriver.jar包 2. 编写代码: String driver= "dm.jdbc.driver.DmDriver"; String url= &quo ...