巧用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. （转）Centos7 修改硬件时间和系统时间

    查看硬件时间 [root@localhost ~]# hwclock --show Tue 13 Jun 2017 02:11:12 AM CST -0.848845 seconds 1 2 可以看出 ...

  2. day67

    昨日回顾 1 orm 创建表,新增字段,修改,删除字段,不能创建数据库  -字段属性phone=models.CharField(max_length=64,null=True)  -null=Tru ...

  3. 模板自定义函数 template function

    sqlite3中的日期默认是UTC,当日期字段的默认值是CURRENT_TIMESTAMP时,这个日期和北京时间CST少了8小时. 网上建议说数据库里用UTC,读取数据时再转换为当地时间. web页面 ...

  4. Hibernae

    开始尝试挺java ee的课程,马士兵老师的 1.ssh的整个框架体系 spring会贯穿在整个过程之中 2.Hibernate的整个框架体系 3. 4. 5. 6.

  5. 20155325 Exp2 后门原理与实践

    基础问答 例举你能想到的一个后门进入到你系统中的可能方式? 乱点链接 学电脑小白不正确配置电脑 下载非官网软件 例举你知道的后门如何启动起来(win及linux)的方式? 软件:ncat socat ...

  6. EZ 2018 05 04 NOIP2018 模拟赛（十二）

    这次的试卷应该是激励我们一下的,链接 然后大家的分数就都很高,然后我就210被一群秒A T2的240大佬爆踩 掉了5rating但Rank竟然发杀了 X_o_r dalao && YZ ...

  7. C++和python的变量对比

    <C++中的this和Python的self对比>基本都是针对函数而言的,从变量的角度看,也有相同之处. C++中,类中定义的变量一般叫做成员变量,或者说是成员属性,它只属于实例对象,只有 ...

  8. 汇编 if else

    知识点: if else 逆向还原代码 一.了解if else结构 sub esp, |. 8B45 FC MOV EAX,DWORD PTR SS:[EBP-] 0040102C |. 3B45 ...

  9. CS190.1x-ML_lab4_ctr_student

    这次lab主要主要是研究click-through rate (CTR).数据集来自于Kaggle的Criteo Labs dataset.相关ipynb文件见我github. 作业分成5个部分:on ...

  10. laraver框架学习

    最近开始学习laravel框架,这个框架在国外很流行,近些年开始在国内流行.自己而是刚开始学习这个框架. 使用composer 更新系统内的依赖包 在终端输入:composer update Entr ...