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构建三角形,我们首 ...
随机推荐
- BZOJ3524 [Poi2014]Couriers 【主席树】
题目 给一个长度为n的序列a.1≤a[i]≤n. m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大于(r-l+1)/2.如果存在,输出这个数,否则输出0. 输入格式 第一 ...
- rand（）与 srand（）
一 头文件 <time.h> srand()就是给rand()提供种子seed. 在C语言中,srand()与rand()是随机函数,其中srand函数是伪随机数发生器的初始化函数,原 ...
- hdu 1503 最长公共子序列
/* 给两个串a,b.输出一个最短的串(含等于a的子序列且含等于b的子序列) */ #include <iostream> #include <cstdio> #include ...
- 汽车加油行驶（cogs 737）
«问题描述:给定一个N*N 的方形网格,设其左上角为起点◎,坐标为(1,1),X 轴向右为正,Y轴向下为正,每个方格边长为1,如图所示.一辆汽车从起点◎出发驶向右下角终点▲,其坐标为(N,N).在若干 ...
- 虚拟 router 原理分析
上一节我们创建了虚拟路由器“router_100_101”,并通过 ping 验证了 vlan100 和 vlan101 已经连通. 本节将重点分析其中的原理. 首先我们查看控制节点的 linux b ...
- 洛谷P2114起床困难综合征
从高位到低位按位枚举,贪心.如果该位填1比填0结果优且填1不会超出m限制,那就填1,否则填0 /*by SilverN*/ #include<iostream> #include<c ...
- 【HDOJ5956】The Elder（树形DP，斜率优化）
题意:有一棵n个点的有根树,每条边上有一个边权.给定P,从i跳到它的祖先j的费用是距离的平方+P,问所有点中到根节点1的总花费最大值 n<=1e5,p<=1e6,w<=1e2 思路: ...
- C#中的继承与覆盖
原文发布时间为:2009-03-03 -- 来源于本人的百度文章 [由搬家工具导入] //using System;//using System.Collections.Generic;using S ...
- Magenta源代码笔记(3) —— 内存管理【转】
转自:http://blog.csdn.net/boymax2/article/details/52550197 版权声明:本文为博主原创文章,未经博主允许不得转载. Magenta内核支持虚拟地址的 ...
- Fedora 24 Linux 环境下实现 Infinality 字体渲染增强及 Java 字体渲染改善的方法（修订）
Fedora 24 Linux 桌面环境默认字体渲染引擎 freetype 及字体配置工具 fontconfig 采用的是未经优化的编译及设置,字体渲染效果比较差.而某些 Linux 发行版的桌面字体 ...