HTML border CSS输出三角形
有以下一段html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.triangle_up
{
height:0px; width:0px;
border-bottom:50px solid red;
border-left:50px solid transparent ;
border-right:50px solid transparent ;
}
</style>
</head>
<body>
<div class="triangle_up"></div>
</body>
</html>
乍一看非常不解，可是效果是这种：
把CSS改一改：
.triangle_up
{
height:0px; width:0px;
border-bottom:50px solid red;
border-left:50px solid ;
border-right:50px solid ;
}
还是晕，再把宽高改一改：
宽高再改一改：
瞬间恍然大悟。
块的宽高都为0。又巧妙设置了透明。所以看起来就是一个三角形！
HTML border CSS输出三角形的更多相关文章
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- CSS绘制三角形—border法
1. 实现一个简单的三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形: CSS实现简单三角形 实现原理: 首先来看在为元素添加border时,border的样子:假设有如下 ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- CSS实现三角形
突然想起搞一把三角形. 简单来说: 建一个div 宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- CSS画三角形引发的一些思考
今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...
- CSS实现三角形效果
类似三角形的形状的元素在网页中可能会用到,我们可以用图片或者CSS元素达到我们想要的效果.这里讲一下是讲自己使用HTML+CSS实现三角形的方式. 为了能够熟悉的使用HTML+CSS构建三角形,我们首 ...
随机推荐
- BZOJ 2190：[SDOI2008]仪仗队（欧拉函数）
[SDOI2008]仪仗队 Description 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视 ...
- socket传输对象
server public class Server{ private static int port = 8888; private static ServerSocket serverSocket ...
- 核苷酸（evolution）
核苷酸(evolution) 题目描述 生物课是帕特里克最讨厌的课程,没有之一. 相比做一些无聊而又无趣的遗传题,他更喜欢其他所有的科目. 包括英语. 但是今天不同.他被一个关于RNA感染DNA的题目 ...
- Python之文件操作：文件、目录的操作
一.创建 1.创建文件 open(path,'w') 2.创建目录 (1)os.mkdir(pt[, mode=0777]) 新建一个目录pt,参数mode表示生成的目录的权限,默认是超级权限,也就是 ...
- cocoaPod的Podfile文件的创建和内容格式
Podfile创建: 1.终端中,cd到项目总目录(cd +路径名) cd/........./......../...../项目名 2.终端中继续建立Podfile(配置文件) touch Podf ...
- 东野圭吾--嫌疑人X的献身读后感
经推荐,打算看日本大作家东野圭吾的<嫌疑人X的献身>.书很薄,八开大小的书两百多页,一下午的时间差不多就能读完.读了前面几章,代入感很强,压抑浓郁的气氛着实让人难受,所以打算先看一下电影, ...
- 乌班图中的ssh服务
SSH服务(TCP端口号22):安全的命令解释器 为客户机提供安全的Shell 环境,用于远程管理 ...
- Smpt命令顺序不正确。 服务器响应为: Error: need EHLO and AUTH first !
刚发现以前做的QQ邮箱发送邮件不能用了,查找了下原因:未加( EnableSsl SSL加密连接 )导致的,顿时觉得很坑,以前QQ邮箱也没有这个限制啊,可能是最近加的. 好吧不多说直接从头走起,照顾 ...
- js中click重复执行
问题背景:在写一个非常简单添加方法的时候,用onclick事件调用添加方法,点击第一次没问题,第二次会重复执行,经过多次查找资料得知这个状况的解决方案,特意总结一下: 代码如下:点击#spec_for ...
- Codeforces Gym100814 I.Salem-异或 (ACM International Collegiate Programming Contest, Egyptian Collegiate Programming Contest (2015) Arab Academy for Science and Technology)
这个题就是二进制,找两个数相应的二进制相对应的位置上数不同的最多的个数.异或写就可以. 一开始还想麻烦了,找出来最大的偶数和最大的奇数,最小的偶数和最小的奇数,但是这样想考虑的不全.因为范围比较小,直 ...