边框

1.边框其实并不是矩形,而是梯形

2.利用边框画三角形:

div.a{

    width:0px;

    height:0px;

    border:10px  white solid;

    border-top-color:red;}
div.b{

    width:0px;

    height:0px;

    border:5px white solid;

    border-left-color:red;}

效果如下:

利用Border画三角形的更多相关文章

  1. CSS深入了解border:利用border画三角形等图形

    三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html la ...

  2. 【前端小技巧】利用border画三角形及梯形

    border是围绕元素内容和内边距的一条或多条线,border 属性允许你规定元素边框的样式.宽度和颜色 值: border-width 粗细 none/hidden/solid/dashed/dot ...

  3. 用CSS的border画三角形

    用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...

  4. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  5. html border画三角形

    最近遇到了问题就是画推进条类似于

  6. 利用border制作三角形原理

    网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...

  7. 如何利用border书写三角形,建议考虑正方形

    网页做三角形图片,你还在拿ps调整吗?out了,老铁,来和我一起脑海畅想一个正方形是由4个等腰直角三角形构成,然后我想保留上边的三角形,那下边.左边.右边的三角形就没了(设置背景色transparen ...

  8. CSS学习笔记:利用border绘制三角形

    在前端的笔试.面试过程中,经常会出现一些不规则图形的CSS设置,基本上多是矩形外加一个三角形.利用CSS属性可以实现三角形的生成,主要利用上下左右的边距的折叠. 1.第一种图形: .box { wid ...

  9. css 利用border 绘制三角形. triangle

    1.基础三角形. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. (转载)Linux查看文件编码格式及文件编码转换

    Linux查看文件编码格式及文件编码转换 时间:2011-04-08作者:woyoo分类:linux评论:0 我友分享: 新浪微博 腾讯微博 搜狐微博 网易微博 开心网 QQ空间 msn 如果你需要在 ...

  2. JQuery简单动画效果的发生顺序和animate方法

    (1)在同一组元素上的效果 当在一个.animate()方法中以多个属性的方式应用时,是同时发生的. 当以方法连缀的形式应用时,是按顺序发生的(排队效果)---除非queue选项值为false. (2 ...

  3. ThinkPHP框架之空控制器

      HOME代表的是模块  前台可以用Home 后台用Admin   Model View Controller  统称为MVC   Model  是数据模型 主要是和数据库打交道的  View代表显 ...

  4. VMware安装CentOS 6.7系统

    VMware安装CentOS 6.7系统 1. 安装前的准备 a) VMware虚拟机软件 b) CentOS 6.7镜像 c) Windows电脑一台 2. 开始安装 a) 打开VMware软件 b ...

  5. Oracle的正则应用之匹配出手机号

    按照要求匹配出符合中国大陆手机号规则的数据 --1 表准备create table test_regexp( object varchar2(50)); --2 数据准备 insert into te ...

  6. NIO Socket编程实例

    1.阻塞模式实例 NIOUtil类,用来通过SOcket获取BufferedReader和PrintWriter. package IO; import java.io.BufferedReader; ...

  7. HTML5本地存储之Web Storage应用介绍

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  8. PHP二位数组按照数组的某个字段值排序

    不多废话 直接代码 /** * @name 排序 按照数组的某个字段值排序 * @param $array 排序数组 $field 排序字段 $direction 排序顺序 * @author wan ...

  9. 设计模式--代理模式(C++版)

    一:代理模式简介 专业版描述:为其他对象提供一种代理以控制对这个对象的访问. 在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 戏剧性描述: ...

  10. Ultimus BPM 零售和快消品行业应用解决方案

    Ultimus BPM 零售和快消品行业应用解决方案 行业应用需求 中国零售及快消品行业正在经历深刻变化.经济下滑,消费回落,行业危机继续发酵:人员工资.房租费用进一步上涨,成本高涨成为不能承受之重: ...