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

<!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. 2386:Lake Counting-poj

    总时间限制:  1000ms 内存限制:  65536kB 描述 Due to recent rains, water has pooled in various places in Farmer J ...

  2. 「JavaScript」手起刀落-一起来写经典的贪吃蛇游戏

    回味 小时候玩的经典贪吃蛇游戏我们印象仍然深刻,谋划了几天,小时候喜欢玩的游戏,长大了终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效 ...

  3. 【转】npm包管理器那些事

    原文链接:http://www.cnblogs.com/shuoer/p/7782125.html npm包管理器那些事! 今天和朋友针对npm包全局安装和本地项目安装这个梗展开的激烈的讨论,故此做一 ...

  4. Docker理解

    近期一直在研究Docker,感悟颇深,和大家分享一下Docker 在云计算中的应用和Docker的原理. Docker 用法https://yeasy.gitbooks.io/docker_pract ...

  5. 离开Visual Studio C#的编译(你不知道的C#)

    很多人一开始学习.net 第一天必定是安装Visual studio 或者很多关于C#学习的书上第一章节必定是告诉你要你下载一个vs 其实没有vs未必就不能开发了,只是可能说vs给我的开发带来了很多的 ...

  6. JAVA IO分析一：File类、字节流、字符流、字节字符转换流

    因为工作事宜,又有一段时间没有写博客了,趁着今天不是很忙开始IO之路:IO往往是我们忽略但是却又非常重要的部分,在这个讲究人机交互体验的年代,IO问题渐渐成了核心问题. 一.File类 在讲解File ...

  7. 【tyvj P4868】天天和不可描述

    http://www.tyvj.cn/p/4868 超级水的题,用递归来模拟,用链表保存这层的内容,每遇到一个左括号就递归一层并合并返回的链表,遇到右括号后返回. 递归进入下一层时传递个参数标记读取新 ...

  8. Codeforces 817F MEX Queries

    题意:对一个维护三种操作:1.将[l..r]中的数全部加入集合中.2.将集合中[l..r]范围内的数删去.3.将集合中在[l..r]中的数删去,并将之前不在集合中的数加入集合 考虑到最近线段树总是写爆 ...

  9. node基础篇一：node介绍、node http、node event 课堂（持续）

    最近工作一直很忙,没时间更新,谅解,这次准备更新一次node教程,本课堂将持续更新,每周坚持更新一到两章,希望对大家有一些小帮助吧: 一.首先什么是node? 1/Node.js 是一个基于 Chro ...

  10. 家居环境监測系统设计（PC上位机版）（手机APP版待定）

    下面是我的毕业设计:家居环境监測系统设计(PC上位机临时版.手机app版待定).本系统採用STC12C5A60S2单片机.结合传感器.分别对空气湿度.空气温度.气压.海拔.进水温度.出水温度.光照强度 ...