使用CSS画图之三角形(一)
简单的画一个三角形，代码如下:
<!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画图之三角形(一)的更多相关文章
- 基于单个 div 的 CSS 画图
原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 画图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺术的结合.赞作者的这句话:Re ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 纯 CSS 创建一个三角形
[要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...
- 如何使用CSS实现小三角形效果
如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...
- 用css制作一个三角形箭头
剑走偏锋——用css制作一个三角形箭头 通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...
- css 画出三角形
技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...
随机推荐
- 0:A+B Problem-poj
0:A+B Problem 总时间限制: 1000ms 内存限制: 65536kB 描述 Calculate a + b 输入 Two integer a,,b (0 ≤ a,b ≤ 10) 输出 ...
- 学习使用azure CLI创建linux环境
学习使用azure CLI创建linux环境 选用了容器的方法来登录 docker run -it microsoft/azure-cli 进入交互界面后登录到我的订阅 azure login -e ...
- Android APP 性能优化的一些思考
说到 Android 系统手机,大部分人的印象是用了一段时间就变得有点卡顿,有些程序在运行期间莫名其妙的出现崩溃,打开系统文件夹一看,发现多了很多文件,然后用手机管家 APP 不断地进行清理优化 ,才 ...
- Pyhton爬虫实战 - 抓取BOSS直聘职位描述 和 数据清洗
Pyhton爬虫实战 - 抓取BOSS直聘职位描述 和 数据清洗 零.致谢 感谢BOSS直聘相对权威的招聘信息,使本人有了这次比较有意思的研究之旅. 由于爬虫持续爬取 www.zhipin.com 网 ...
- Qt---自定义界面之QStyle
最近想学习下Qt的自定义界面,因此花了点时间看了下QStyle,,,,结果很难受,这一块涉及到一大块GUI的具体实现方式,看得我很头疼.想看第一手资料并且英语功底不错的可以直接上qt文档,下面我会以易 ...
- 简单用数组模拟顺序栈（c++版）适合新手
**栈是一种操作受限制的线性表,太多官方的话我也不说了,我们都知道栈元素是先进后出的,它有两种存储结构,分别是顺序存储结构和链式存储结构. **今天我先记一下顺序存储结构,后面我会加上链式存储结构的. ...
- Codeforces Round #257 (Div. 2) A. Jzzhu and Children（简单题）
题目链接:http://codeforces.com/problemset/problem/450/A ------------------------------------------------ ...
- LeetCode139:Word Break
Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...
- hdu 5635 LCP Array（BC第一题）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5635 LCP Array Time Limit: 4000/2000 MS (Java/Others) ...
- 自己定义定时器（Timer）
近期做项目的时候,用到了java.util.Timer定时器类.也初步使用了,个人感觉不错.只是,在某些方面Timer类无法满足项目的需求.比方,在使用Timer时,调用schedule()方法之后( ...