巧用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. “System.Reflection.AmbiguousMatchException”类型的异常在 mscorlib.dll 中发生

    错误提示: “System.Reflection.AmbiguousMatchException”类型的异常在 mscorlib.dll 中发生,但未在用户代码中进行处理. 发现不明确的匹配. 问题原 ...

  2. 板载CAN的树莓派扩展板Strato Pi CAN

    板载CAN的树莓派扩展板Strato Pi CAN   Sfera Labs推出了最新的树莓派扩展组件“灵云派”,其中包括CAN总线,电气隔离的RS-485,RTC和9-65V电源. 位于意大利米兰的 ...

  3. Linux下MySQL安装与操作

    sudo apt-get update //用于更新源,获取软件包列表 sudo apt-get upgrade //用于升级指定软件包 install //安装 remove //移除软件包 aut ...

  4. 2《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——操作文件

    已经学习了基本的命令,现在是时候学习操作文件了,这也是命令行的重要任务.还是基于本教程的事先规定,本教程是入门级的,不要求熟悉类似编辑文本的程序(这些文本编辑程序,将在下个系列教程中介绍, Learn ...

  5. 一个有趣的异步时序逻辑电路设计实例 ——MFM调制模块设计笔记

    本文从本人的163博客搬迁至此. MFM是改进型频率调制的缩写,其本质是一种非归零码,是用于磁介质硬盘存储的一种调制方式.调制规则有两句话,即两个翻转条件: 1.为1的码元在每个码元的正中进行一次翻转 ...

  6. WPF编程，窗口保持上次关闭时的大小与位置。

    原文:WPF编程,窗口保持上次关闭时的大小与位置. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/article/details/8 ...

  7. 实践：IIS7下访问ashx页面，显示404

    问题描述 1.路径什么的都对,这方面的原因就不要想了 2.在我的电脑上可以,在同事的电脑上不可以 方案1:未注册ashx的处理应用程序 也就是不知道IIS不知道用什么应用程序处理ashx文件,解决办法 ...

  8. POJ3267

    从今天开始POJ里的一部分类型的题目就一般不放在一起写了 一个是太丑,格式麻烦,第二个是以后的题目难度都有所增大,因此一道题可能就要写蛮长 尤其是DP这一块,以前一直没好好学习,现在从基础的先开始吧 ...

  9. 连接到win2003的远程桌面，客户端要如何操作

    第一步:命令行执行mstsc 第二步:处输入开启了远程桌面功能的计算机IP地址.

  10. 【转载】VS配置路径和宏

    原文路径:http://blog.csdn.net/puttytree/article/details/7838419 在介绍项目配置之前,先说明两点 1. 项目配置中,最好不要使用相对路径,更不要使 ...