`
cocoding
  • 浏览: 37505 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

纯css画各种图形，包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等【转】

 
阅读更多

1、正方形

最终效果：

image

CSS代码如下：

#square {
    width: 100px;
    height: 100px;
    background: red;
}

 

2、长方形

最终效果：

image

CSS代码如下：

#rectangle {
    width: 200px;
    height: 100px;
    background: red;
}

 

3、圆形

最终效果：

image

CSS代码如下：

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

 

4、椭圆

最终效果：

image

CSS代码如下：

#oval {
    width: 200px;
    height: 100px;
    background: red;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

 

5、上三角

最终效果：

image

CSS代码如下：

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

 

6、下三角

最终效果：

image

CSS代码如下：

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

 

7、左三角

最终效果：

image

CSS代码如下：

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

 

8、右三角

最终效果：

image

CSS代码如下：

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

9、左上三角

最终效果：

image

CSS代码如下：

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red; 
    border-right: 100px solid transparent;          
}

 

10、右上三角

最终效果：

image

CSS代码如下：

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red; 
    border-left: 100px solid transparent;
     
}

 

11、左下三角

最终效果：

image

CSS代码如下：

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red; 
    border-right: 100px solid transparent;  
}

 

12、右下三角

最终效果：

image

CSS代码如下：

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red; 
    border-left: 100px solid transparent;
}

 

13、平行四边形

最终效果：

image

CSS代码如下：

#parallelogram {
    width: 150px;
    height: 100px;
        margin-left:20px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
}

 

14、梯形

最终效果：

image

CSS代码如下：

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}

 

15、六角星

最终效果：

image

CSS代码如下：

#star-six {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    position: relative;
}
#star-six: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;
}

 

16、五角星

最终效果：

image

CSS代码如下：

#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: 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: 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: '';
}

 

17、五角大楼

最终效果：

image

CSS代码如下：

#pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
}
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent red;
}

 

18、六边形

最终效果：

image

CSS代码如下：

#hexagon {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
}
#hexagon:before {
    content: "";
    position: absolute;
    top: -25px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
#hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}

 

19、八角形

最终效果：

image

CSS代码如下：

#octagon {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
}
 
#octagon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;    
    border-bottom: 29px solid red;
    border-left: 29px solid #eee;
    border-right: 29px solid #eee;
    width: 42px;
    height: 0;
}
 
#octagon:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;    
    border-top: 29px solid red;
    border-left: 29px solid #eee;
    border-right: 29px solid #eee;
    width: 42px;
    height: 0;
}

 

20、爱心

最终效果：

image

CSS代码如下：

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

 

21、无穷大符号

最终效果：

image

CSS代码如下：

#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 red;
    -moz-border-radius: 50px 50px 0 50px;
         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);
}

 

22、鸡蛋

最终效果

image

CSS代码如下：

#egg {
   display:block;
   width: 126px; 
   height: 180px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:        50%   50%  50%  50%  / 60%   60%   40%  40%;
}

 

23、食逗人（Pac-Man）

最终效果：

image
CSS代码如下：
#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid red;
  border-left: 60px solid red;
  border-bottom: 60px solid red;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}
 

24、提示对话框

最终效果：

image

CSS代码如下：

#talkbubble {
   width: 120px; 
   height: 80px; 
   background: red;
   position: relative;
   -moz-border-radius:    10px; 
   -webkit-border-radius: 10px; 
   border-radius:         10px;
}
#talkbubble: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;
}

 

25、12角星

最终效果：

image

CSS代码如下：

#burst-12 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
}
#burst-12:before, #burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
}
#burst-12:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
            transform: rotate(30deg);
}
#burst-12:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
            transform: rotate(60deg);
}

 

26、8角星

最终效果：

image

CSS代码如下：

#burst-8 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
            transform: rotate(20deg);
}
#burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

 

27、钻石

最终效果：

image

CSS代码如下：

#cut-diamond {
    border-style: solid;
    border-color: transparent transparent red transparent;
    border-width: 0 25px 25px 25px;
    height: 0;
    width: 50px;
    position: relative;
    margin: 20px 0 50px 0;
}
#cut-diamond:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

 

28、阴阳八卦（霸气的这个）

image

CSS代码如下：

#yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
 
#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
 
#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}

 

原文链接： 
http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html

分享到：
| Git工作常用命令（1）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

    图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一...

    CSS3奇思妙想单标签实现各类图形

    无论是简单的圆形、复杂的多边形，还是动态的交互式元素，都能通过CSS3轻松实现。这不仅提高了网页性能，还降低了维护成本，让Web设计更加便捷且富有表现力。通过不断学习和实践，我们可以发掘更多CSS3的奇思妙想，...

    css制作的几何图形7.3

    本资源包含了一些已经经过测试并成功实现的简单CSS几何图形示例，可供下载学习和交流。如果你在尝试过程中遇到任何问题，可以通过留言的方式寻求帮助。 首先，我们来探讨CSS如何构建基本的几何图形。CSS通过设置`...

    纯CSS3绘制的僵尸宝宝卡通头像效果源码.zip

    僵尸宝宝的头像可能包含圆形或椭圆形来表示头部，矩形或梯形来构建身体，以及多边形如三角形或五边形来制作手脚。CSS3提供了`border-radius`属性来创建圆角，`clip-path`或`mask`来定义复杂的形状。开发者可以通过...

    c#制作椭圆、圆、三角印章

    这个工具允许用户创建不同形状的印章，如椭圆形、圆形、三角形以及矩形。以下是对这个项目的一些详细知识点的解释： 1. **C#基础**： C#是一种面向对象的编程语言，由微软公司开发，主要用于.NET框架。它支持类、...

    css 画图（三角、五角星）

    值得注意的是，CSS画图并非只能局限于三角形和五角星，实际上，你可以用CSS绘制几乎任何复杂的图形，如圆形、椭圆、多边形甚至是自定义的矢量图形。关键在于理解CSS的边框、背景、定位、伪元素和transform属性的灵活...

    CSS3绘制各种图形图标样式特效特效代码

    "CSS3绘制各种图形图标样式特效特效代码"是利用CSS3的强大功能来创建无需依赖图片的图形图标。这个资源集合提供了一系列的示例代码，可以帮助开发者们实现富有创意和视觉吸引力的图形效果。 首先，我们要理解CSS3中...

    几何爱心图形CSS3特效

    CSS3提供了多种方法来创建几何形状，如使用border-radius属性创建圆形或椭圆，使用polygon函数绘制多边形等。在这个特效中，爱心通常由两个相互交错的三角形组成，这可以通过巧妙地利用伪元素（如`:before`和`:after...

    纯CSS打造兼容各种浏览器的几何图形打包

    通过深入理解边框属性和CSS布局原理，你可以创造出更多复杂的形状，甚至可以构建出更抽象的图案，如多边形、圆形、椭圆等，而无需依赖图像处理工具。这是一项实用且有趣的技能，值得每个前端开发者学习和掌握。

    借助HTML5 Canvas来绘制三角形和矩形等多边形的方法

    本文将深入探讨如何使用HTML5 Canvas来绘制三角形、矩形以及更复杂的多边形。 首先，我们需要了解Canvas的核心组件，即CanvasRenderingContext2D对象。这个对象提供了各种属性和方法，用于控制在Canvas元素上绘制的...

    基于HTML5，CSS和Javascript技术开发实时性的Web图形图像处理平台源码+项目说明+使用说明

    实现直线、曲线、椭圆（圆）、矩形（圆角矩形）、三角形（直角三角形、等边三角形、任意三角形）、多边形的绘制。 绘制过程中，可以选择颜色，选择颜色有两种方式：颜色选择、颜色拾取。可以进行颜色填充，即对选定...

    ellipse-mounted-loci-p5js:我们的交互式网络应用程序，用于可视化椭圆形三角形的轨迹

    在本项目中，“ellipse-mounted-loci-p5js”是一个基于Web的交互式应用程序，它利用JavaScript编程语言和p5.js库来可视化椭圆上特定类型的三角形的轨迹。p5.js是一个开源创意编程库，它简化了在浏览器中创建视觉艺术...

    SVG 入门教程(一) 基本形状

    SVG图像由一系列几何形状构成，包括矩形、圆形、椭圆、线条、多边形和路径等。这些形状可以通过SVG的XML语法来定义。下面我们将逐一详细介绍这些基本形状。 1. 矩形（rect）： SVG中的矩形可以通过`<rect>`元素创建...

    HTML5 SVG实现可爱的小狗和狐狸动画

    首先，SVG的基本结构由`<svg>`标签定义，其中包含了图形的宽度、高度以及视口等属性。例如： ```html <!-- 图形元素将在这里绘制 --> ``` 在SVG中，我们可以使用多种形状元素来构建小狗和狐狸的轮廓，如`...

    CSS3中的clip-path使用攻略

    它允许开发者创建各种复杂的形状，如圆形、椭圆、多边形等，为网页设计添加独特的视觉效果。尽管`clip-path`在所有主流浏览器中还没有得到全面支持，但它在Webkit浏览器中已经可以使用，并且通过添加前缀 `-webkit-`...

    CSS中clip-path属性的使用详解

    在CSS中，`clip-path`属性是一个非常强大的工具，它允许开发者通过定义形状来裁剪元素的可见区域，从而创造出各种独特的视觉效果。这个属性可以用于网页设计中的图像、按钮、背景等元素，以实现非传统形状的布局。在...

    scss-shapes:用于scs的形状mixin集合

    "scss-shapes"是一个专门为SCSS编写的库，提供了一系列的mixin（混合）来帮助开发者创建各种形状，如圆形、矩形、多边形等，极大地提高了样式设计的效率和灵活性。 在SCSS中，mixin是一个可以包含样式规则的代码块...

    HTML5在canvas中绘制复杂形状附效果截图

    通过熟练掌握这些基本方法，开发者可以在Canvas上创建出极其复杂的图形，包括自定义图标、动画和其他视觉效果。Canvas的灵活性使其成为Web开发中的一个强大工具，尤其适用于数据可视化、游戏开发和交互式用户界面...

Magicbox
Global site tag (gtag.js) - Google Analytics