巧用css的border-radius属性，也能绘制出好看的图形

html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用css创建图形</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="rectangle"></div>
<div class="sanjia"></div>
<div class="tuoyuan"></div>
<div class="yueliang"></div>
<div class="shuye"></div>
</body>
</html>

css部分

div{
margin: 8px;
}
.rectangle{
width: 250px;
height: 150px;
background: #6DC75F;;
}
/*三角形*/
.sanjia{
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 150px solid #6DC75F;
width: 0;
height: 0;
}
/*椭圆*/
.tuoyuan{
width: 300px;
height: 150px;
background: #6DC75F;
border-radius: 150px/75px;
-webkit-border-radius: 150px/75px;
-moz-border-radius: 150px/75px;
}
/*月亮*/
.yueliang{
width: 150px;
height: 150px;
/*background: #6DC75F;*/
border-radius: 50%;
box-shadow: 15px 15px 0 0 green;
}
/*树叶*/
.shuye{
width: 150px;
height: 150px;
background: #6DC75F;
border-radius: 40px 300px 5px 300px;
}

用css绘制图形的更多相关文章

  1. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  2. CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  3. CSS图形基础：纯CSS绘制图形

    为了在页面中利用CSS3绘制图形,在页面中定义 <div  class="container"> <div class="shape"> ...

  4. 纯 CSS 绘制图形（心形、六边形等）

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  5. Css绘制形状

    前言:终于我的大一生活结束了,迎来了愉快的暑假,大家都开始了各自的忙碌.一直忙着一些项目的事情,终于决定今天要更新一篇博客了,对上一阶段的学习做简单的总结. 这次我主要总结一下用Css绘制各种形状的技 ...

  6. css绘制常见的几何图形

    前言:终于我的大一生活结束了,迎来了愉快的暑假,大家都开始了各自的忙碌.一直忙着一些项目的事情,终于决定今天要更新一篇博客了,对上一阶段的学习做简单的总结. 这次我主要总结一下用Css绘制各种形状的技 ...

  7. 摘记 史上最强大的40多个纯CSS绘制的图形（一）

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  8. 史上最强大的40多个纯CSS绘制的图形

    Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...

  9. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

随机推荐

  1. js 动态声明变量（eval）

    eval()可以将一段字符串当作js代码来执行. 动态声明变量(字符串)可通过eval(字符串)来实现.举例如下: var Thread_num=5; for(var i=1;i<=Thread ...

  2. 关于CAN总线的被动错误标志的问题？

    关于CAN总线的被动错误标志的问题? 关于CAN总线的被动错误标志,协议中的描述是"处于被动错误状态的单元检测出错误时,输出被动错误标志". 对此有几个疑问: 1.被动错误标志的发 ...

  3. SJA1000 CAN驱动程序演示实验

    SJA1000 CAN驱动程序演示实验 2016-04-12 20:41:22来源: eefocus 关键字:SJA1000  CAN  驱动程序  演示实验   收藏 评论(0) 分享到 微博 QQ ...

  4. currentBackgroundImage：获取按钮背景图片

    NSData *imagedata1=UIImagePNGRepresentation(btn.currentBackgroundImage);//按钮背景图片转NSData NSData *imag ...

  5. 20155327 Exp9 Web安全基础

    20155327 Exp9 Web安全基础 基础问题回答 (1)SQL注入攻击原理,如何防御 SQL注入攻击就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器 ...

  6. 纯 CSS 利用 label + input 实现选项卡

    clip 属性 用于剪裁绝对定位元素. .class { position:absolute; clip:rect(0px,60px,200px,0px); } scroll-behavior: sm ...

  7. [LOJ#2878]. 「JOISC 2014 Day2」邮戳拉力赛[括号序列dp]

    题意 题目链接 分析 如果走到了下行车站就一定会在前面的某个车站走回上行车站,可以看成是一对括号. 我们要求的就是 类似 代价最小的括号序列匹配问题,定义 f(i,j) 表示到 i 有 j 个左括号没 ...

  8. [UOJ#276][清华集训2016]汽水[分数规划+点分治]

    题意 给定一棵 \(n\) 个点的树,给定 \(k\) ,求 \(|\frac{\sum w(路径长度)}{t(路径边数)}-k|\)的最小值. \(n\leq 5\times 10^5,k\leq ...

  9. Package 设计3：数据源的提取和使用暂存

    SSIS 设计系列: Package设计1:选择数据类型.暂存数据和并发 Package设计2:增量更新 Package 设计3:数据源的提取和使用暂存 在使用SSIS Package处理海量数据时, ...

  10. mybatis源码-解析配置文件（二）之解析的流程

    目录 1. 简介 2. 配置文件解析流程分析 2.1 调用 2.2 解析的目的 2.3 XML 解析流程 2.3.1 build(parser) 2.3.2 new XMLConfigBuilder( ...