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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title></title>
  6. 	<style>
  8. 		/* 正方形8*8 */
  9. 		.a {
  10. 			width: 0;
  11. 			height: 0;
  12. 			border: 4px solid;
  13. 		}
  15. 		/* 正方形80*80 (4个三角形) */
  16. 		.b {
  17. 			width: 0;
  18. 			height: 0;
  19. 			border-top: 40px solid #000;
  20. 			border-right: 40px solid #ff0000;
  21. 			border-left: 40px solid #ff0000;
  22. 			border-bottom: 40px solid #000;
  23. 		}
  25. 		/* 三角形: 左右透明，下面没有边框。 */
  26. 		.c {
  27. 			width: 0;
  28. 			height: 0;
  29. 			font-size: 0;
  30. 			border-width: 40px;
  31. 			border-color: #333 transparent transparent transparent;
  32. 			border-style: solid;
  33. 			border-bottom: none;
  34. 		}
  36. 	</style>
  37. </head>
  38. <body>
  39. 	<div class="a"></div>
  40. 	<div class="b"></div>
  41. 	<div class="c"></div>
  42. </body>
  43. </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. 爬起点小说 day01

    先介绍下我自己爬起点小说的思路: 1.爬取所有的类型列表 a.链接存redis中 类型表:novel_list 具体每一种类型:bnovel_all_list(把novel_list和bnovel_l ...

  3. K-means 算法

    本学习笔记参考自吴恩达老师机器学习公开课 聚类算法是一种无监督学习算法.k均值算法是其中应用最为广泛的一种,算法接受一个未标记的数据集,然后将数据聚类成不同的组.K均值是一个迭代算法,假设我们想要将数 ...

  4. c语言贪吃蛇详解-2.画出蛇

    c语言贪吃蛇详解-2.画出蛇 前几天的实验室培训课后作业我布置了贪吃蛇,今天有时间就来写一下题解.我将分几步来教大家写一个贪吃蛇小游戏.由于大家c语言未学完,这个教程只涉及数组和函数等知识点. 蛇的身 ...

  5. MYSQL常见运算符和函数

    字符函数 (1)CONCAT():字符连接 SELECT CONCAT('IMOOC','-','MySQL');//IMOOC-MySQL SELECT CONCAT (first_name,las ...

  6. 源码安装pipelineDB之CentOS7

    源码下载:https://github.com/pipelinedb/pipelinedb github上面README只要是针对ubunte来安装的. 在正式安装前,要先下载好依赖的包: check ...

  7. SQLServer复习文档1(with C#)

    目录: 前言 SQL Server基础准备 1.新建数据库 2.在数据中添加表 3.向表中添加数据 SQL Server与C#基础准备 实例解析 1.C#连接数据库 2.查询特定列数据 3.使用列别名 ...

  8. Linux 多进程多线程相关概念

    进程:可执行程序是存储在磁盘设备上的由代码和数据按某种格式组织的静态实体,而进程是可被调度的代码的动态运行.在Linux系统中,每个进程都有各自的生命周期.在一个进程的生命周期中,都有各自的运行环境以 ...

  9. Material使用01 侧边栏MdSidenavModule、工具栏MdTollbarModule

    前提准备: 构建好一个Angular2应用 熟悉CSS的flex布局风格 1 利用flex进行布局 1.1 创建三个组件 app-header app-main app-footer 1.2 在主组件 ...

  10. 【Hdu3555】 Bomb（数位DP）

    Description 题意就是找0到N有多少个数中含有49. \(1\leq N \leq2^{63}-1\) Solution 数位DP,与hdu3652类似 \(F[i][state]\)表示位 ...