纯css制作带三角(兼容所有浏览器)
如何用 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制作带三角(兼容所有浏览器)的更多相关文章
- 纯css制作带三角border篇(兼容所有浏览器)
今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...
- 纯css制作小三角
在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...
- 纯CSS制作三角(转)
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
- 纯css写带小三角对话框
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- 如何使用纯CSS制作特效导航条?
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
随机推荐
- Linux环境下Redis安装配置步骤[转]
在LInux下安装Redis的步骤如下: 1.首先下载一个Redis安装包,官网下载地址为:https://redis.io/ 2.在Linux下解压redis: tar -zxvf redis-2. ...
- post processing
- .NET Best Practices
Before starting with best practices tobe followed, it is good to have clear understanding of how mem ...
- 阿里云mysql远程连不上
1. 服务器规则添加 3306端口 2. mysql localhost 改为% mysql> select user, host from mysql.user; GRANT ALL PRIV ...
- 【python-proxy by sockets5】pysocks
pip install pysocks https://stackoverflow.com/questions/2317849/how-can-i-use-a-socks-4-5-proxy-with ...
- vue的手机端框架mint-ui头部header组件实现返回到上一个浏览页面
<mt-header title="中文号主页" fixed> <router-link to="" slot="left" ...
- python 在windows 中文显示
今天看到mechanize,在网上找例子实验,发现只要代码里出现中文,就会报错 SyntaxError: Non-ASCII character , but no encoding declared; ...
- 安装MongoDB 到服务器
用管理员身份运行CMD > cd C:\Program Files\mongodb\bin > C:\Program Files\mongodb\bin>mongod --dbpat ...
- linux环境中安装NRPE插件执行远程"本地资源"检查?NRPE安装?
需求描述: 在安装完nagios之后,需要对本地资源进行监控,比如磁盘空间的使用,进程数,swap空间,等等.这些都不是通过网络提供出来的, 所以,都是本地资源,可以通过NRPE插件实现在客户端中采集 ...
- linux 使用supervisor来管理进程
现在假设一个脚本是,hello.py,内容是 fo = open('xx.txt','w') while 1: fo.write('hello world') print('hi') time.sle ...