用CSS绘制三角形
其实用HTML CSS绘制三角行 是非常简单的 ，我在网上看了不少人写的博客，里面写的好复杂样子，反正我是看的云里雾里的，说实话是挺简单的。
首先提出一段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:100px;
height:100px;
border-top:20px solid red;
border-right:20px solid green;
border-bottom:20px solid blue;
border-left:20px solid lightgreen;
margin:100px auto;
} </style>
</head>
<body>
<div> </div>
</body>
</html>
显示的效果是这样的：
说明一个问题：
一个div盒子如果有width 和 height的 时候
div盒子的每个边是个梯形的形状 ，这个时候可以想象一下，如果把div的宽和高逐渐缩小 缩小到0 代码入下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:0px;
height:0px;
border-top:20px solid red;
border-right:20px solid green;
border-bottom:20px solid blue;
border-left:20px solid lightgreen;
margin:100px auto;
} </style>
</head>
<body>
<div> </div>
</body>
显示的是这样的：
那么我们可以断想一下 ，如果把其他的边变成透明的颜色又会是什么样子的呢？ 现在我们把上边 右边 下边的 都变成透明的 就得到了 向右的三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:0px;
height:0px;
border-top:20px solid transparent;
border-right:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid lightgreen;
margin:100px auto;
} </style>
</head>
<body>
<div> </div>
</body>
</html>
用CSS绘制三角形的更多相关文章
- CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- CSS学习笔记（8）--纯CSS绘制三角形（各种角度）
纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单. 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
- CSS绘制三角形和箭头，不用再用图片了
前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...
- CSS绘制三角形和箭头
<html> <head> <meta charset="utf-8"> <title>CSS绘制三角形和箭头</title& ...
- 纯Css绘制三角形箭头三种方法
在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...
- CSS绘制三角形的原理剖析
今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret { display: inline-block; ; ; margin-left: 2px; vertical-align: ...
- 纯CSS绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 纯CSS绘制三角形（各种角度）类似于使用字符画法，根据位移不同，也可以使用两个元素画出三角边框
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
随机推荐
- ArcGIS教程：分水岭
摘要 确定栅格中一组像元之上的汇流区域. 使用方法 · 各个分水岭的值将取自输入栅格中源的值或者要素倾泻点数据.假设倾泻点为栅格数据集,则使用像元值.假设倾泻点为点要素数据集,则从指定的字段中获取值. ...
- Eclipse搭建Web Service服务
1.建立动态Web工程(Dynamic Web Project),工程名为Server.编写类HelloWorld. package com.mysever; public class HelloWo ...
- YTUOJ-推断字符串是否为回文
题目描写叙述 编敲代码,推断输入的一个字符串是否为回文.若是则输出"Yes",否则输出"No".所谓回文是指順读和倒读都是一样的字符串. 输入 输出 例子输入 ...
- LeetCode(38)题解: Count and Say
https://leetcode.com/problems/count-and-say/ 题目: The count-and-say sequence is the sequence of integ ...
- 武汉哪里有卖篮球架的 n-gram
铜像雕塑哪里有加工厂华强北哪里可以解ID锁?我的苹果ipadmini2忘记屏幕密码了,刷机后需要原始appleID激活深圳小吃培训哪家好?东莞哪里有小吃培训的?禅城哪里有收纳箱专卖店?篷房就是帐篷吗? ...
- [翻译]理解Unity的自动内存管理
当创建对象.字符串或数组时,存储它所需的内存将从称为堆的中央池中分配.当项目不再使用时,它曾经占用的内存可以被回收并用于别的东西.在过去,通常由程序员通过适当的函数调用明确地分配和释放这些堆内存块.如 ...
- shell mv
mv $a"/"$b"/"* $a"/"$b"/preview" 移动某个文件夹下的所有文件 使用* 但*不用双引号
- 一个实用的UIView的类别
// // FrameAccessor.h // FrameAccessor // // Created by Alex Denisov on 18.03.12. // Copyright (c) 2 ...
- Codeforces Round #Pi (Div. 2) C. Geometric Progression
C. Geometric Progression time limit per test 1 second memory limit per test 256 megabytes input stan ...
- HDU3533 Escape —— BFS / A*算法 + 预处理
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3533 Escape Time Limit: 20000/10000 MS (Java/Others) ...