1.等腰三角形

.isosceles{
width:;
height:;
border:30px solid;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: red;
}

2.直角三角形

.right{
width:;
height:;
border:30px solid;
border-left:;
border-right-color: transparent;
border-top:;
border-bottom-color: red;
}

3.圆

.round{
width: 100px;
height: 100px;
background-color: red;
border-radius:50%;
}

4.椭圆

.ellipse{
width: 100px;
height: 80px;
background-color: red;
border-radius:50%;
}

css绘制特殊图形基础的更多相关文章

  1. 摘记 史上最强大的40多个纯CSS绘制的图形(一)

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

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

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

  3. CSS 魔法系列:纯 CSS 绘制各种图形《系列六》

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

  4. CSS 魔法系列:纯 CSS 绘制各种图形《系列五》

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

  5. CSS 魔法系列:纯 CSS 绘制基本图形(圆、椭圆等)

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

  6. 史上最强大的40多个纯CSS绘制的图形[转]

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

  7. 纯CSS绘制的图形一览

    整理网上一些使用纯CSS绘制的图形示例~~纯属抄袭,哈哈...仅仅是为了自己以后查看! Square(正方形) #square { width: 100px; height: 100px; backg ...

  8. CSS绘制简单图形

    究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...

  9. css绘制特殊图形,meida查询,display inline-box间隙问题以及calc()函数

    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...

随机推荐

  1. day12_API第二天

    1.Scanner注意问题 1.Scanner中方法                   next() -- 查找并返回来自此扫描器的下一个完整标记.           nextLine() -- ...

  2. asp.net 自定义控件

    在Visual Studio中,所有的ASP.NET 2.0控件都是自定义控件,创建自己的自定义控件一般需要完成以下三步.(1)在站点APP_Code下创建一个新类:(2)修改这个类,让它成为WebC ...

  3. 基于MVC4+EasyUI的Web开发框架形成之旅--MVC控制器的设计

    自从上篇<基于MVC4+EasyUI的Web开发框架形成之旅--总体介绍>总体性的概括,得到很多同行的关注和支持,不过上一篇主要是介绍一个总体的界面效果和思路,本系列的文章将逐步介绍其中的 ...

  4. finally语句总是不会被执行?

    答案是否(1)try语句没有被执行到,如在try语句之前return就返回了,这样finally语句就不会执行.这也说明了finally语句被执行的必要而非充分条件是:相应的try语句一定被执行到.( ...

  5. HTML DOM 实例-Document 对象

    使用 document.write() 向输出流写文本 <html><body><script type="text/javascript">d ...

  6. StackOverflow程序员推荐的几本书籍

    1. <代码大全>史蒂夫·迈克康奈尔 推荐数:1684 “优秀的编程实践的百科全书,<代码大全>注重个人技术,其中所有东西加起来,就是我们本能所说的“编写整洁的代码”.这本书有 ...

  7. 微信获取坐标的JS

    wx.getLocation({    type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'    succes ...

  8. UE用法

    ueditor去除自动转换  ueditor在使用中发现很多问题.比如自动添加P标签,自动去除span,自动给li添加ul开始结束,自动把div转成P标签等等. 其实很多在百度上可以找到.这里总结下, ...

  9. Android OpenCV 图像识别

    最近打算写一个android 平台opencv 的小程序,着手查找了一下资料.网络上的资料参差不齐,有一些都比较老旧,我参考了前面的方法找到了一个简单的搭建方法,分享给大家. 0,环境的搭建: jav ...

  10. [Linux] Linux下谁在消耗我们的cache

    一.缘由: 曾经看到MySQL服务器上Cache占用特别大,其实大家都知道这是合理的,这些都是可用内存: 那么问题来了,是谁在占用这些Cache呢?如果去掉不合理的Cache占用,系统内存会更充分的得 ...