闲来无事,写写图形。当时巩固一下css3吧.。前端小白,写的不好还请前辈多指教。

三角形

{
width:;
height:;
border-bottom: 140px solid red ;
border-right: 70px solid transparent;
border-left: 70px solid transparent;
}

圆形

{
width: 0px;
height: 0px;
border:50px solid red;
border-radius: 50%;
}

梯形

{
width: 120px;
height: 0px;
border-bottom:120px solid red ;
border-right: 60px solid transparent;
border-left: 60px solid transparent;
}

平行四边形

{
width: 0px;
height: 0px;
border:100px solid red ;
transform: skew(30deg);
}

菱形(实现方法有很多,这里只是两个三角形合并,也就是正三角和倒三角)

.a{
width:;
height:;
border-bottom: 140px solid red ;
border-right: 70px solid transparent;
border-left: 70px solid transparent;
}
.b{
width:;
height:;
border-top : 140px solid red;
border-left : 70px solid transparent;
border-right : 70px solid transparent;
}

椭圆形

{
    width: 200px;
height: 50px;
border:1px solid red;
border-radius:100px;
}

五边形(这里使用一个三角形加一个正方形实现)

    .a{
width:;
height:;
border-bottom : 140px solid red;
border-left : 70px solid transparent;
border-right : 70px solid transparent;
} .b{
width: 140px;
height: 140px;
display: inline-block;
border:1px solid red;
background-color: red ;
}

贪吃蛇蛇头你敢信?哈哈

{
width: 0px;
height: 0px;
border-radius: 50%;
border:140px solid red;
border-right :140px solid transparent;
}

扇形

{
width: 0px;
height: 0px;
border-radius: 50%;
border :140px solid transparent;
border-bottom:140px solid red;
}

 登录icon(两个div,其中一个div设置一个margin-top的负值,移上来就好了)

    .a{
width: 0px;
height: 0px;
border-radius: 50%;
border: 30px solid #000;
}
.b{
width: 0px;
border: 50px solid #000;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
border-top-width: 25px;
border-bottom-width: 25px;
}

再来一个小视频 (用4个div拼接起来,两个圆圈,一个长方形,一个梯形就好了)

    .a{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #000;
} .b{
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #000;
}
.c{
width: 80px;
height: 50px;
border: 1px solid #000;
border-radius: 10px;
}
.d{
height: 40px;
border-right: 30px solid #000;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-radius: 10px;
} <div>
<div class="a" style="margin-left:160px ;margin-top: 100px;"></div>
<div class="b" ></div>
</div>
<div>
<div class="c" style="margin-left:150px ; display: inline-block;vertical-align: top;"></div>
<div class="d" style="margin-left:0px ; display: inline-block;margin-top: -10px;"></div>
</div>

再来一个垃圾桶 三个图形叠加。正方形,椭圆,和梯形。然后在设置一个倾斜就好了

.a{
width: 0px;
height: 0px;
border-radius: 4px;
border: 8px solid #000;
border-top-width:;
margin-left:164px ;
margin-top: 100px;
} .b{
width: 0px;
height: 0px;
border-radius:8px ;
border-top: 15px solid #000;
border-left: 132px solid #000;
margin-left: 108px;
}
.c{
width: 78px;
border-bottom-width: 100px;
border-top: 100px solid #000;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
} <div style="display: inline-block;transform: rotate(9deg);">
<div class="a"></div>
<div class="b"></div>
</div>
<div style="margin-left: 110px; margin-top: 18px;">
<div class="c"></div>
</div>

css3画图那些事(三角形、圆形、梯形等)的更多相关文章

  1. CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形

    本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...

  2. 纯css 实现 三角形、梯形等 效果

    今天一个刚开始学习html 的小白问我一个问题,css 可以实现正方形,长方形,和圆型(border-radius),怎么能做出个三角形.梯形等等形状呢?于是我便开启了装逼模式, 给他讲解了一下我的思 ...

  3. 用CSS3实现带小三角形的div框(不用图片)

    现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移 ...

  4. CSS3 画基本图形,圆形、椭圆形、三角形等

    CSS3圆角#css3-circle{ width: 150px; height: 150px; border-radius: 50%; }CSS3 椭圆形css3 radius#css3-elips ...

  5. CSS3画图

    众所周知,用CSS3的圆角.转换可以画出各种不同的形状,制作不同的图案,早些前先驱者已画出经典的叮当猫,iphone手机等展示CSS3的强大实力,趁最近有空我也对CSS3进行了一些实践,颇有收获. 用 ...

  6. CSS 实现三角形、梯形、等腰梯形

    三角形 ; width: 0px; border-width: 0px 30px 45px 145px; border-style: none solid solid; border-color: t ...

  7. css3动画,点击圆形背景扩展整个页面效果

    上次做项目的时候,要求点击链接,这个链接的圆形背景扩散充满整个页面,今天把这个效果整理一下,是简单的css3的动画特效,粘贴下面的代码看效果 <!DOCTYPE html> <htm ...

  8. 利用CSS3中transparent实现三角形及三角形组合图

    ??如何绘制三角形及三角形的组合图案,以下是自己画的草图 源码如下 <!DOCTYPE html> <html lang="en"> <head> ...

  9. 利用css3特性写出三角形(兼容IE浏览器)

    利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...

随机推荐

  1. webapi找到了与该请求匹配的多个操作

    关于这个问题是路由在找方法的时候层没有指定对,同一个链接,同样的参数导致路由找不到方法导致的报错,可以在WebApiConfig中多配置一层,比如"api/{controller}/{act ...

  2. git 查看暂存区

    一.简介 git ls-files 命令是用来查看暂存区中文件信息 二.常用参数 参数说明(括号里是简写) --cached(-c)显示暂存区中的文件,git ls-files命令默认的参数 --de ...

  3. java设计模式-----18、职责链模式

    概念: Chain of Responsibility(CoR)模式也叫职责链模式.责任链模式或者职责连锁模式,是行为模式之一,该模式构造一系列分别担当不同的职责的类的对象来共同完成一个任务,这些类的 ...

  4. Markdown预览功能不可用解决方案

    初学者在使用Markdown时也许会遇到这个问题 原因是电脑缺少一个组件,解决方案很简单,安装上就好了,以下是链接 http://markdownpad.com/download/awesomium_ ...

  5. Global Average Pooling Layers for Object Localization

    For image classification tasks, a common choice for convolutional neural network (CNN) architecture ...

  6. 润乾配置连接kingbase(金仓)数据库

     问题背景 客户根据项目的不同,使用润乾连接的数据库类型各种各样,此文针对前几日使用润乾设计器连接kingbase金仓数据库做一个说明. kingbase金仓数据库是一款国产数据库,操作方式和配置 ...

  7. apache ftp server的简单入门(java应用内嵌ftp server)

    Apache Ftp Server:(强调) Apache Ftp Server 是100%纯Java的FTP服务器软件,它采用MINA网络框架开发具有非常好的性能.Apache FtpServer ...

  8. Django 模板语言 标签

    前言:django的模板语法基本和flask的jinja2基本一样.下面比较一下两个模板语法的区别. ------深度变量的查找(万能的句点号) 在 Django 模板中遍历复杂数据结构的关键是句点字 ...

  9. 关于p标签

    说p标签是不能嵌套div和p的,嵌套会被浏览器解析分离.但如果你使用了document.createElement创建div,再appendChild的话反而可以了.看来浏览器并不支持动态解析

  10. select2加载远程数据示例

    核心js $("#query_pack_code").select2({ language: "zh-CN", allowClear: true, width: ...