巧用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. Android soundpool初探

    内容:本编播客主要讲解一下“即时音效”: 特点:快,短. 在播放这类时间短但是要求反应迅速的的音效,就不能够用不能够使用播放时间较长的音乐播放技术了,而应该采取soundpool技术来播放. soun ...

  2. 简单直白的去理解AOP，了解Spring AOP，使用 @AspectJ - 读书笔记

    AOP = Aspect Oriental Programing  面向切面编程 文章里不讲AOP术语,什么连接点.切点.切面什么的,这玩意太绕,记不住也罢.旨在以简单.直白的方式理解AOP,理解Sp ...

  3. [浅谈CSS核心概念] CSS布局模型：float和position

    1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...

  4. 编写Linux脚本

    下面是重新启动Linux下某进程的shell脚本.以tomcat进程为例: #!/bin/sh pid=`ps -ef|grep tomcat|grep -v grep|awk '{print $2} ...

  5. Linux内核RPC请求过程

    这篇文章讲讲server端RPC报文的处理流程.server端RPC报文的处理函数是svc_process,这个函数位于net/sunrpc/svc.c中.这个函数须要一个svc_rqst结构的指针作 ...

  6. Sign in with the app-specific password you generated. If you forgot the app-specific password or need to create a new one, go to appleid.apple.com

    iOS打包报错信息如下:Sign in with the app-specific password you generated. If you forgot the app-specific pas ...

  7. Flutter - 自动引用pub.dartlang.org/packages上最新的packages

    一般在pubspec.yaml里面引用pub.dartlang.org/packages的packages时,我们都是在包名称后面加上版本号的,谷歌默认也是这样写的. cupertino_icons: ...

  8. 大数据入门第十八天——kafka整合flume、storm

    一.实时业务指标分析 1.业务 业务: 订单系统---->MQ---->Kakfa--->Storm 数据:订单编号.订单时间.支付编号.支付时间.商品编号.商家名称.商品价格.优惠 ...

  9. Luogo P2324 [SCOI2005]骑士精神

    所有想练习A*的人都先来敲一下这道题吧. 数据范围即便只有5*5,但朴素的爆搜还是会超时. 因此考虑剪枝. 对于这道题,肯定只要进行最优化剪枝,判断现在走的步数+剩下最少要走的步数,如果大于ans或者 ...

  10. ubuntu 12.04 桌面版关闭图形界面

    对于12.04的ubuntu桌面系统,如果想在开机的时候直接进入字符界面,那可以: 编辑文件 /etc/init/lightdm.conf,在第12行附近,原句“ and runlevel [!06] ...