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. 简单介绍Javascript匿名函数和面向对象编程

    忙里偷闲,简单介绍一下Javascript中匿名函数和闭包函数以及面向对象编程.首先简单介绍一下Javascript中的密名函数. 在Javascript中函数有以下3中定义方式: 1.最常用的定义方 ...

  2. C# 多线程同步和线程通信

    多线程通信 1. 当线程之间有先后的依赖关系时,属于线程之间的通信问题.也就是后一个线程要等待别的一个或多个线程全部完成,才能开始下一步的工作.可以使用: WaitHandle Class WaitH ...

  3. sed详细分析

    [一.简单描述] sed命令类似命令行的文本编辑器,以行为单位(见注1).除非带命令i(in-place)否则源文件内容并不会被更新.   [二.使用] [2.1.使用方式] 存在两种使用方式: 1. ...

  4. libevent库1.4升级到2.0时无法flush的解决办法

    libevent的接口兼容性做的还算不错,基本上替换一下就转到新版本了.但是,强制flush数据的时候出了问题.目前的应用场景是,遇到顶号登录这种情形,先用bufferevent_write向客户端发 ...

  5. mongodb,redis,hbase 三者都是nosql数据库,他们的最大区别和不同定位是什么?

      不严谨地讲,Redis定位在"快",HBase定位于"大",mongodb定位在"灵活". NoSQL的优点正好就是SQL的软肋,而其弱 ...

  6. 一些上流的CSS3图片样式

    直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们.不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器 ...

  7. Knockoutjs实例 - 属性绑定(Bindings)之流程控制(Control flow)

    一.foreach binding 使用此功能可以方便我们循环遍历输出某个数组.集合中的内容. (1).循环遍历输出数组 View Row Code 1 <script type="t ...

  8. SpringMVC学习系列(10) 之 异常处理

    在项目中如何处理出现的异常,在每个可能出现异常的地方都写代码捕捉异常?这显然是不合理的,当项目越来越大是也是不可维护的.那么如何保证我们处理异常的代码精简且便于维护呢?这就是本篇要讲的内容—>异 ...

  9. Js操作DOM小练习_01

    1.页面引入jQuery文件和bootstrap文件: 2.贴上代码 <!DOCTYPE html> <html lang="en"> <head&g ...

  10. redis集群的一些笔记

    当节点数量少于6个时候会提示如下信息,初始化一个集群的时候需要6个节点,为什么?? *** ERROR: Invalid configuration for cluster creation. *** ...