css 利用border 绘制三角形. triangle
1.基础三角形.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局css以及辅助css</title>
<style type="text/css"> /***1: 初始样式设置*******/
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, div,span, table,th,tr,td,button { margin:0; padding:0; } /*******2: 清除浮动******/ /*IE6, IE7 生效*/
.floatfix{
*zoom:1;
} /*其他浏览器*/
.floatfix:after{
content:"";
display:table;
clear:both;
} /***3: 超出长度显示省略号. 还需要设置width**/ .ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} .all {
width: 80%;
margin: 30px auto;
} .row {
border: 1px solid black;
margin: 10px;
padding: 10px;
} p {
color: red;
} /*****4: 三角****************/ .triangle {
width: 0;
height: 0;
border-top: 20px solid #EEB422;
border-right: 20px solid #C0FF3E;
border-bottom: 20px solid #A020F0;
border-left: 20px solid #7CFC00;
} .triangle-up4 {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #A020F0;
border-left: 20px solid transparent;
} .triangle-down4 {
width: 0;
height: 0;
border-top: 20px solid #EEB422;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
} .triangle-left4 {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid #C0FF3E;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
} .triangle-right4 {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #7CFC00;
} .triangle-up {
width: 0;
height: 0;
border-right: 20px solid transparent;
border-bottom: 40px solid #A020F0;
border-left: 20px solid transparent;
} .triangle-down {
width: 0;
height: 0;
border-top: 40px solid #EEB422;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
} .triangle-left {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 40px solid #7CFC00;
} .triangle-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 40px solid #C0FF3E;
} .triangle-left-bottom {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #7CFC00;
} .triangle-right-bottom {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-right: 40px solid #C0FF3E;
} .triangle-left-up {
width: 0;
height: 0;
border-bottom: 40px solid transparent;
border-left: 40px solid #7CFC00;
} .triangle-right-up {
width: 0;
height: 0;
border-bottom: 40px solid transparent;
border-right: 40px solid #C0FF3E;
} </style> <!-- 引入js文件 -->
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> </head>
<body> <div class="all"> <hr>
<p>使用border的4个方向</p>
<div class="row">
<span>四个三角</span>
<div class="triangle">
</div>
</div> <div class="row">
<span>四个三角-上</span>
<div class="triangle-up4">
</div>
</div> <div class="row">
<span>四个三角-下</span>
<div class="triangle-down4">
</div>
</div> <div class="row">
<span>四个三角-左</span>
<div class="triangle-left4">
</div>
</div> <div class="row">
<span>四个三角-右</span>
<div class="triangle-right4">
</div>
</div> <hr>
<p>使用border的3个方向</p>
<div class="row">
<span>上三角</span>
<div class="triangle-up">
</div>
</div>
<div class="row">
<span>下三角</span>
<div class="triangle-down">
</div>
</div>
<div class="row">
<span>左三角</span>
<div class="triangle-left">
</div>
</div>
<div class="row">
<span>右三角</span>
<div class="triangle-right">
</div>
</div> <hr>
<p>使用border的2个方向</p>
<div class="row">
<span>左下角</span>
<div class="triangle-left-bottom">
</div>
</div>
<div class="row">
<span>右下角</span>
<div class="triangle-right-bottom">
</div>
</div> <div class="row">
<span>左上角</span>
<div class="triangle-left-up">
</div>
</div>
<div class="row">
<span>右上角</span>
<div class="triangle-right-up">
</div>
</div> </div> </body>
</html>
显示:
注意:
1)border 可以设置四个, 出现的就是 四个三角 , 四个三角-上, 四个上角-下, 四个三角-左 , 四个三角-右
2) border 可以设置三个, 出现的是 上三角, 下三角, 左三角, 右三角
4)border 可以设置 两个, 出现的是 左下角, 右下角 , 左上角, 右上角
这是因为?
参考链接:
css 利用border 绘制三角形. triangle的更多相关文章
- CSS用border绘制三角形
使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子 ...
- CSS学习笔记：利用border绘制三角形
在前端的笔试.面试过程中,经常会出现一些不规则图形的CSS设置,基本上多是矩形外加一个三角形.利用CSS属性可以实现三角形的生成,主要利用上下左右的边距的折叠. 1.第一种图形: .box { wid ...
- 通过CSS的border绘制三角形
通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...
- CSS之border绘制三角形
用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px a ...
- css中border画三角形
<!doctype html><html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用border制作三角形原理
网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...
- 利用Border画三角形
边框 1.边框其实并不是矩形,而是梯形 2.利用边框画三角形: div.a{ width:0px; height:0px; border:10px white solid; border-top-co ...
- 用CSS的border画三角形
用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...
- 如何利用border书写三角形，建议考虑正方形
网页做三角形图片,你还在拿ps调整吗?out了,老铁,来和我一起脑海畅想一个正方形是由4个等腰直角三角形构成,然后我想保留上边的三角形,那下边.左边.右边的三角形就没了(设置背景色transparen ...
随机推荐
- django权限管理（一）
权限:权限就是一个包含正则的url. Rbac 权限管理: Role-Based Access Control,基于角色的访问控制.用户通过角色与权限进行关联,一个用户可以有多个角色,一个角色可以有多 ...
- 排座椅（洛谷P1056）
题目描述 上课的时候总会有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主任小雪发现了一些有趣的现象,当同学们的座次确定下来之后,只有有限的D对同学上课时会交头接耳. 同 ...
- 子类父类（虚函数下的 引用指针 对象）->看来没有子类指针这回事
#include<iostream> using namespace std; class Father { public: Father() { cout << " ...
- oracle数据库静态监听配置示例
[oracle@Oracle11g admin]$ cat listener.ora SID_LIST_LISTENER = (SID_LIST = (SID_DESC = (GLOB ...
- Qt 设置窗口居中显示和窗体大小
设置窗口居中显示 方法一:在窗口(QWidget类及派生类)的构造函数中添加如下代码: #include <QDesktopWidget> //....... QDesktopWidget ...
- TortioseSVN切换账号教程
TorioseSVN如果不记住用户名密码那么基本每样连接服务器的操作都要重新请求认证这很麻烦,所以我们一般选择记住用户认证信息. 但记住用户认证信息后以后每次登录都后台自动以该用户身份登录,不像QQ自 ...
- 包--json 与 pickle 模块
一. 包 一个含有__init__.py 文件的文件夹(将py 文件中的内容划分成不同的部分放在不同的py 文件中,在将这些py 文件放在一个文件夹中) 是模块,不做执行文件,仅做调用 m1.py 和 ...
- Test22455
- 学习笔记-AngularJs（四）
之前学习的事视图与模版,我们在控制器文件中直接定义一个数组,让其在模版文件中用ng-repeat指令构造一个迭代器,定义的数组http://t.cn/RUbL4rP如同以下: $scope.phone ...
- 学习笔记-AngularJs（二）
在接下来学习angularjs中,我按照的就是之前 学习笔记-AngularJs(一)所讲的目录来搭建一个学习的项目,做一个互联网大佬人物简介的例子,当然也可以使用angualrjs上面提供的官方例子 ...