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 ...
随机推荐
- Oracl 12c安装
Oracl安装部署 一.前置条件准备 修改hostname: hostname oracle 修改/etc/hosts:添加192.168.10.106 oracle 添加软件开发工具 搭建yum源 ...
- First Bad Version leetcode java
问题描述: You are a product manager and currently leading a team to develop a new product. Unfortunately ...
- 【JS】【1】JavaScript屏蔽Backspace键（避免点击后页面产生回退）
前言: 1,参考资料:JavaScript屏蔽Backspace键 - 孤傲苍狼 - 博客园(http://www.cnblogs.com/xdp-gacl/p/3785806.html) 2,参考的 ...
- PAT 1050 String Subtraction
1050 String Subtraction (20 分) Given two strings S1 and S2, S=S1−S2 is defined to be t ...
- mybatis调用存储过程的两种方式
先总结和说明一下注意点: 1.如果传入的某个参数可能为空,必须指定jdbcType 2.当传入map作为参数时,必须指定JavaType 3.如果做动态查询(参数为表名,sql关键词),可以使用${} ...
- git拉取远程分支并创建本地分支
本地分支推送至远程 git checkout local_branch git push origin local_branch:remote_branch 一.查看远程分支 使用如下Git命令查看所 ...
- dubbo 框架和 tomcat 的比较
接触 dubbo 有一段时间,特别想拿 dubbo 和 tomcat 比较一番. tomcat 是 web 服务器,提供 http 服务,当 tomcat 收到浏览器发送的 http 请求时,根据 u ...
- notepad++自动对齐使用空格代替Tab并将空格显示为小点
一.说明 对大多数语言而言自动对齐使用空格还是tab对编译运行并没有什么影响,但对python问题就很大:因为就算是缩进看起来是一样的但某些行用空格某些行用tab运行会报错. 另外除了空格替换tab外 ...
- 牛客网 PAT 算法历年真题 1001 ： A+B和C (15)
1001 : A+B和C (15) 时间限制 1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard 题目描述 给定区间[-2的31次方, 2的31次方]内 ...
- GsonFormat根据返回值json快速构建Model
Json是一个插件,我们只需要在Android studio中进行安装一下,即可使用. 根据平时的操作,根据浏览器中返回中的数据一行一行敲,其实这样非常麻烦. 有一个简单的方法,可以瞬间生成一个实体类 ...