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

三角形

  1. {
  2. width:;
  3. height:;
  4. border-bottom: 140px solid red ;
  5. border-right: 70px solid transparent;
  6. border-left: 70px solid transparent;
  7. }

圆形

  1. {
  2. width: 0px;
  3. height: 0px;
  4. border:50px solid red;
  5. border-radius: 50%;
  6. }

梯形

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

平行四边形

  1. {
  2. width: 0px;
  3. height: 0px;
  4. border:100px solid red ;
  5. transform: skew(30deg);
  6. }

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

  1. .a{
  2. width:;
  3. height:;
  4. border-bottom: 140px solid red ;
  5. border-right: 70px solid transparent;
  6. border-left: 70px solid transparent;
  7. }
  8. .b{
  9. width:;
  10. height:;
  11. border-top : 140px solid red;
  12. border-left : 70px solid transparent;
  13. border-right : 70px solid transparent;
  14. }

椭圆形

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

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

  1. .a{
  2. width:;
  3. height:;
  4. border-bottom : 140px solid red;
  5. border-left : 70px solid transparent;
  6. border-right : 70px solid transparent;
  7. }
  8.  
  9. .b{
  10. width: 140px;
  11. height: 140px;
  12. display: inline-block;
  13. border:1px solid red;
  14. background-color: red ;
  15. }

贪吃蛇蛇头你敢信?哈哈

  1. {
  2. width: 0px;
  3. height: 0px;
  4. border-radius: 50%;
  5. border:140px solid red;
  6. border-right :140px solid transparent;
  7. }

扇形

  1. {
  2. width: 0px;
  3. height: 0px;
  4. border-radius: 50%;
  5. border :140px solid transparent;
  6. border-bottom:140px solid red;
  7. }

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

  1. .a{
  2. width: 0px;
  3. height: 0px;
  4. border-radius: 50%;
  5. border: 30px solid #000;
  6. }
  7. .b{
  8. width: 0px;
  9. border: 50px solid #000;
  10. border-top-right-radius: 50px;
  11. border-top-left-radius: 50px;
  12. border-top-width: 25px;
  13. border-bottom-width: 25px;
  14. }

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

  1. .a{
  2. display: inline-block;
  3. width: 20px;
  4. height: 20px;
  5. border-radius: 50%;
  6. border: 1px solid #000;
  7. }
  8.  
  9. .b{
  10. display: inline-block;
  11. width: 30px;
  12. height: 30px;
  13. border-radius: 50%;
  14. border: 1px solid #000;
  15. }
  16. .c{
  17. width: 80px;
  18. height: 50px;
  19. border: 1px solid #000;
  20. border-radius: 10px;
  21. }
  22. .d{
  23. height: 40px;
  24. border-right: 30px solid #000;
  25. border-top: 16px solid transparent;
  26. border-bottom: 16px solid transparent;
  27. border-radius: 10px;
  28. }
  29.  
  30. <div>
  31. <div class="a" style="margin-left:160px ;margin-top: 100px;"></div>
  32. <div class="b" ></div>
  33. </div>
  34. <div>
  35. <div class="c" style="margin-left:150px ; display: inline-block;vertical-align: top;"></div>
  36. <div class="d" style="margin-left:0px ; display: inline-block;margin-top: -10px;"></div>
  37. </div>

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

  1. .a{
  2. width: 0px;
  3. height: 0px;
  4. border-radius: 4px;
  5. border: 8px solid #000;
  6. border-top-width:;
  7. margin-left:164px ;
  8. margin-top: 100px;
  9. }
  10.  
  11. .b{
  12. width: 0px;
  13. height: 0px;
  14. border-radius:8px ;
  15. border-top: 15px solid #000;
  16. border-left: 132px solid #000;
  17. margin-left: 108px;
  18. }
  19. .c{
  20. width: 78px;
  21. border-bottom-width: 100px;
  22. border-top: 100px solid #000;
  23. border-left: 18px solid transparent;
  24. border-right: 18px solid transparent;
  25. }
  26.  
  27. <div style="display: inline-block;transform: rotate(9deg);">
  28. <div class="a"></div>
  29. <div class="b"></div>
  30. </div>
  31. <div style="margin-left: 110px; margin-top: 18px;">
  32. <div class="c"></div>
  33. </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. IDF实验室—不难不易的js加密

    查看源代码 <html> <head> <script src="/tpl/wctf/Public/js/lib/jquery.js">< ...

  2. 【清北学堂 】Day 4 总结

    忙(tui)了这么多天,终于有时间认(sui)真(bian)做做总结了 随便开始:(反正也没听 一:读入输出优化 1 输入优化 <1>快读    废话不多说上代码 inline int r ...

  3. 有序的数据结构中:内存操作红黑树快,磁盘操作b+树快

    红黑树常用于存储内存中的有序数据,增删很快,b+树常用于文件系统和数据库索引,因为b树的子节点大于红黑树,红黑树只能有2个子节点,b树子节点大于2,子节点树多这一特点保证了存储相同大小的数据,树的高度 ...

  4. IDEA 现有项目连接SVN

    前言:有时会先搭建好系统,准备好所有配置文件及公共类,然后才会从IDEA中将代码放到SVN中,这里正好讲述了如何从现有代码连接到SVN. 首先将该项目启动SVN管理 然后关联对应SVN地址 右键项目名 ...

  5. Linux学习6-Linux常用命令(2)

    目录处理命令     命令名称:mkdir 命令英文原意:make directories 命令所在路径:/bin/mkdir 执行权限:所有用户 功能描述:创建新目录 语法:mkdir -p[目录名 ...

  6. Javascript全选,反选,全不选的实现代码

    使用js实现全选.反选.全不选. 代码如下: <html> <head> <script type="text/javascript"> fun ...

  7. 洛谷P3437 [POI2006]TET-Tetris 3D(二维线段树 标记永久化)

    题意 题目链接 Sol 二维线段树空间复杂度是多少啊qwqqq 为啥这题全网空间都是\(n^2\)还有人硬要说是\(nlog^2n\)呀.. 对于这题来说,因为有修改操作,我们需要在外层线段树上也打标 ...

  8. spring代理例子

    ---------------------------------------------------------- 先来看一下目录结构 显然service里面有两个java文件,UserDao是接口 ...

  9. demo.testfire.net 靶场测试流程记录

    demo.testfire.net span::selection, .CodeMirror-line > span > span::selection { background: #d7 ...

  10. 2cmd 窗口 javac 错误:编码GBK的不可映射字符

    错误截图: 解决办法:第一步 第二步: