如何用 border 来制作三角。

html 代码如下：

代码如下:

<div class="arrow-up"></div>

<div class="arrow-down"></div>

<div class="arrow-left"></div>

<div class="arrow-right"></div>

　　

css 代码如下：

代码如下:

.arrow-up {

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

_border-left: 5px solid white;

_border-right: 5px solid white;

border-bottom: 5px solid black;

overflow:hidden;

}

.arrow-down {

width: 0;

height: 0;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

_border-left: 20px solid white;

_border-right: 20px solid white;

border-top: 20px solid #f00;

overflow:hidden;

}

.arrow-right {

width: 0;

height: 0;

border-top: 60px solid transparent;

border-bottom: 60px solid transparent;

_border-top: 60px solid white;

_border-bottom: 60px solid white;

border-left: 60px solid green;

overflow:hidden;

}

.arrow-left {

width: 0;

height: 0;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

_border-top: 10px solid white;

_border-bottom: 10px solid white;

border-right:10px solid blue;

overflow:hidden;

}

　　

效果图如下：

首先附上效果图：

以上的效果完全是用 css 来实现的，那么是怎么实现的呢？

我们知道 html 中有一些特殊的字符，具体的请点击 HTML特殊字符大全。

通过特殊字符，利用 css 中的 margin 或者 position 方法完全可以实现以上效果。

代码如下:

 
<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>字符制作三角边框</title>

<style type="text/css">

*{margin:0;padding:0;}

body{font-family:SimSun;}

h1{text-align:center;}

.demo1{width:300px;margin:20px auto;border:1px solid red;height:100px;}

.demo1 em,.demo1 span{display:block;width:30px;height:16px;font-size:30px;overflow:hidden;_position:relative;margin-left:10px;}

.demo1 em{margin-top:-16px;color:red;font-style:normal;}

.demo1 span{margin-top:-14px;color:white;}

.demo2{width:300px;border:1px solid #F00;height:100px;position:relative;margin-left:auto;margin-right:auto;}

.demo2 em,.demo2 span{font-style:normal;font-size:30px;position:absolute;left:-16px;top:40px;color:red;}

.demo2 span{left:-14px;color:white;}

</style>

</head>

<body>

<h1>demo1 是用 margin 方法</h1>

<div class="demo1">

<em>◆</em>

<span>◆</span>

</div>

<h1>demo2 是用 position 方法</h1>

<div class="demo2">

<em>◆</em>

<span>◆</span>

</div>

</body>

</html>

纯css制作带三角(兼容所有浏览器)的更多相关文章

  1. 纯css制作带三角border篇(兼容所有浏览器)

    今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...

  2. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  3. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  4. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  5. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  6. 纯CSS制作水平垂直居中“十字架”

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

  7. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  8. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  9. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

随机推荐

  1. 图形界面至少要有一个顶级Swing容器

    图形界面至少要有一个顶级Swing容器 顶级Swing容器为其它Swing组件在屏幕上的绘制和处理事件提供支持 常用的顶级容器: JFrame(框架):表示主程序窗口 JDialog(对话框):每个J ...

  2. EF5+MVC4系列(1) Podwerdesigner15.1设计数据库;PD中间表和EF实体模型设计器生成中间表的区别;EF5.0 表关系插入数据(一对多,多对多)

    在上一篇文章中, http://www.cnblogs.com/joeylee/p/3790980.html  我们用 PD15.1 来设计了数据库,并且生成 了sql数据库,现在我们用 vs2013 ...

  3. ecshop You don't have permission to access / on this server

    回复 6# 晓天 确实是这个短标签的事情,谢谢了啊. 第一种方法:替换程序里的内容,以后就省心了. 针对所有的php脚本 在DW里面运行查找替换l  主要做替换操作 当然是短标签替换为整标签 注意顺序 ...

  4. python 程序构架浅析

    定义:通常的 Python 程序的构架是指:将一个程序分割为源代码文件的集合以及将这些部分连接在一起的方法. python的程序构架可表示为: 一个python程序就是一个模块的系统.它有一个顶层文件 ...

  5. thinkphp3.2 控制器导入模型

    方法一: public function index(){ $Member = new MemberModel(); $money = $Member->Money(); print_r($mo ...

  6. vue如何加入百度ssp广告位代码

    vue如何加入百度联盟广告,可以参考 :http://www.cnblogs.com/beileixinqing/p/8379184.html 这里讲述vue如何加入百度ssp媒体的广告 这里是百度异 ...

  7. JAXB基本使用

    JAXB主要用来实现对象和XML之间的序列化和反序列化,关于JAXB的介绍就不多说了,网上一搜一大把,这里主要总结下基本使用方法和一些注意事项 首先定义两个示例类ClassA,ClassB,用于后续的 ...

  8. SQL语句：一个表，通过一个字段查找另外一个字段不相同值

    select * from [dbo].[Sys_MemberKey] a where exists(select * from [Sys_MemberKey] b where a.FMachineC ...

  9. JSP判断闰年

    闰年条件: 能被4整除但不能被100整除 能被400整除 <%@ page language="java" import="java.util.*" co ...

  10. WIN7隐藏GUEST登录账户

    在Windows7中,我们有时候需要开启Guest用户,以方便给别的同事共享打印机和部分文件,但同时又不希望别人用Guest账号从本地登陆界面进入本机.这个时候就需要将本地登陆界面的Guest用户进行 ...