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

<!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. 2017计算机学科夏令营上机考试-A判决素数个数

    A:判决素数个数 总时间限制:  1000ms 内存限制:  65536kB 描述 输入两个整数X和Y,输出两者之间的素数个数(包括X和Y). 输入 两个整数X和Y(1 <= X,Y <= ...

  2. KNN--用于手写数字识别

    优点:精度高,对异常值不敏感,无数据输入假定 缺点:计算复杂度高,空间复杂度高 适用数据范围:数值型和标称型   一般流程:     (1). 收集数据(网络抓取)     (2).处理数据,将数据处 ...

  3. win下搭建python3+PyQt5+eric6环境

    一.安装python3 1.下载python3的安装包,默认安装即可,注意勾选 Add Python 3.6 to Path .但是这样默认安装的路径太长,不太方便找到,可选择定制安装,自己定义安装路 ...

  4. 教我徒弟Android开发入门（一）

    前言: 这个系列的教程是为我徒弟准备的,也适合还不懂java但是想学android开发的小白们~ 本系列是在Android Studio的环境下运行,默认大家的开发环境都是配置好了的 没有配置好的同学 ...

  5. eclipse 常用插件 整理

    开发过程中的常用Eclipse插件,按字母排序: (1)    AmaterasUML        介绍:Eclipse的UML插件,支持UML活动图,class图,sequence图,usecas ...

  6. 主流PHP框架间的比较（Zend Framework，CakePHP，CodeIgniter，Symfony，ThinkPHP，FleaPHP）

    Zend Framework 优点: Zend Framework大量应用了PHP5中面向对象的新特征:接口.异常.抽象类.SPL等等.这些东西的应用让Zend Framework具有高度的模块化和灵 ...

  7. Spark之导出PMML文件（Python）

    PMML,全称预言模型标记语言(Predictive Model Markup Language),利用XML描述和存储数据挖掘模型,是一个已经被W3C所接受的标准.PMML是一种基于XML的语言,用 ...

  8. 制造测试数据的程序及对拍程序概述（Like CyaRon）

    作为一名OIer,比赛时,对拍是必须的 不对拍,有时可以悔恨终身 首先,对拍的程序 一个是要交的程序 另一个可以是暴力.搜索等,可以比较慢,但是必须正确 下面是C++版对拍程序(C++ & c ...

  9. SQL Server 日志清理

    --SQL2005: Backup Log DNName with no_log --这里的DNName是你要收缩的数据库名,自己注意修改下面的数据库名,我就不再注释了. go dump transa ...

  10. YiShop_商城系统如何做好口碑营销

    口碑营销是指企业在品牌建立过程中,通过客户间的相互交流将自己的产品信息或者品牌传播开来.口碑是目标,营销是手段,产品是基石.那么,商城系统如何做好口碑营销呢?  下面由YiShop小编带你了解一下:1 ...