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构建三角形,我们首 ...
随机推荐
- nginx访问控制allow、deny（ngx_http_access_module）
单看nginx模块名ngx_http_access_module,很多人一定很陌生,但是deny和allow相比没一个人不知道的,实际上deny和allow指令属于ngx_http_access_mo ...
- JAVA 程序监控基础简述
最近在项目中自感程序木有问题,也没有什么错误日志出来.但就是有人反映服务慢,有时连不上的情况.为了解决这么妖的问题只能去详细的看看运行中的程序到底出了什么情况,这时如果有个比较好的监控工具可以监控运行 ...
- Win右键管理员权限的获取
Windows Registry Editor Version 5.00 ;取得文件修改权限 [HKEY_CLASSES_ROOT\*\shell\runas] @="管理员权限" ...
- RS232与TTL
TTL电平,RS232电平和CMOS电平 不同点:TTL232的0是用0v表示,1是用5V表示.RS232的0是用+3V--+15V表示,1是用-3V---15V表示. 接口一般都用三根线:1:地线: ...
- 省选算法学习-数据结构-splay
于是乎,在丧心病狂的noip2017结束之后,我们很快就要迎来更加丧心病狂的省选了-_-|| 所以从写完上一篇博客开始到现在我一直深陷数据结构和网络流的漩涡不能自拔 今天终于想起来写博客(只是懒吧.. ...
- noip2018 pre——Dp
Dp专题 1011: KC的瓷器 (porcelain) 题目描述 KC来到了一个盛产瓷器的国度.他来到了一位商人的店铺.在这个店铺中,KC看到了一个有n(1<=n<=100)排的柜子,每 ...
- 七牛云的cdn配置
https://segmentfault.com/q/1010000004265556
- vmware虚拟机无法ping通主机，也无法联网
- git merge / rebase 分支的新建与合并
merge https://git-scm.com/book/zh/v2/Git-%E5%88%86%E6%94%AF-%E5%88%86%E6%94%AF%E7%9A%84%E6%96%B0%E5% ...
- RSTP介绍
1. 介绍 RSTP(Rapid Spanning Tree Protocol),快速生成树协议,标准为802.1w(已合入802.1D-2004)RSTP是对STP技术的修改和补充,最大特点就是快速 ...