简单的画一个三角形，代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style>

		/* 正方形8*8 */

		.a {

			width: 0;

			height: 0;

			border: 4px solid;

		}

		/* 正方形80*80 (4个三角形) */

		.b {

			width: 0;

			height: 0;

			border-top: 40px solid #000;

			border-right: 40px solid #ff0000;

			border-left: 40px solid #ff0000;

			border-bottom: 40px solid #000;

		}

		/* 三角形: 左右透明，下面没有边框。 */

		.c {

			width: 0;

			height: 0;

			font-size: 0;

			border-width: 40px;

			border-color: #333 transparent transparent transparent;

			border-style: solid;

			border-bottom: none;

		}

	</style>

</head>

<body>

	<div class="a"></div>

	<div class="b"></div>

	<div class="c"></div>

</body>

</html>

使用CSS画图之三角形(一)的更多相关文章

  1. 基于单个 div 的 CSS 画图

    原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 画图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺术的结合.赞作者的这句话:Re ...

  2. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  3. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  4. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  5. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  6. 纯 CSS 创建一个三角形

    [要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...

  7. 如何使用CSS实现小三角形效果

    如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...

  8. 用css制作一个三角形箭头

    剑走偏锋——用css制作一个三角形箭头   通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...

  9. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

随机推荐

  1. 比ngx_http_substitutions_filter_module 更强大的替换模块sregex的replace-filter-nginx-module

    之前写过nginx反代替换的教程(传送门),使用了ngx_http_substitutions_filter_module模块.不过这货只能替换同一行,具有局限性-_-# 现在一个更强大的替换模块来了 ...

  2. 用sort（）按小到大排序的方法：

    例子:function compare(value1,value2){ if(value1<value2){ return -1; }else if(value1==value2){ retur ...

  3. canvas画一个时钟

    效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. UWP 显示图片到Image控件

    要想显示图片,前提是要有一个空间的啦 <Image x:Name="imageHidden"/> 然后一个响应选择图片得事件,注意使用asynchronous方法哦 F ...

  5. javascript 命名空间与运用（前端基础系列）

    所谓代码,当你随便命名一个变量:var name = "ukerxi"; 就是一句代码:但当你的代码写出来后,对于后续维护及阅读的人,就可以看出代码是否,易读,易理解:优雅的代码总 ...

  6. Centos-6.5 + python3 + mysql5.6 环境搭建

    注意:Centos6.5 是刚装好的系统 yum install lrzsz  (ftp上传和下载) yum install -y gcc     yum install -y gcc gcc-c++ ...

  7. Cesium中Clock控件及时间序列瓦片动态加载

    前言 前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...

  8. 轻谈BFC

    BFC 定义 CSS2.1的定义 Block formatting contexts 9.4.1 Block formatting contexts Floats, absolutely positi ...

  9. C++中指向类的指针

    事情缘起是因为上班途中刷到了有个微博,那人说答对这个问题的请发简历. 看了就是关于指向C++类的指针的知识,原代码类似下面这样: class NullPointCall { public: void ...

  10. 剑指Offer——当当+搜狐+好未来笔试题+知识点总结

    剑指Offer--当当+搜狐+好未来笔试题+知识点总结 情景回想 时间:2016.9.21 15:00-21:00 地点:山东省网络环境智能计算技术重点实验室 事件:当当笔试.搜狐笔试.好未来笔试 3 ...