<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

<style>

    /*三角形*/

  /* div{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid;} */

    /*带角框*/

    div{width:100px;height:100px;border:2px solid;}

    div::before{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid black;position:relative;top:10px;left:100px;}

    div::after{content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid white;position:relative;top:-6px;left:98px;}

</style>

</head>

<body>

<div></div>

</body>

</html>

实现三角形的原理：1，div的border生成是向外扩的，2,当div有相邻border时，拐角处会以一种各占一半的三角拼合。所以当设这div的宽高为0和0时，如果它有四个border的话，就会组成一个正方形，每边分别为一个等腰三角形，此时若设任意三边对望的两个边为透明色（transparent）时，剩下的一边为一个等腰三角形。

带角框实现原理：利用两个三角形的相对定位使产生视觉上的相减形成不闭合的角号（“>”）。

css2----实现三角形和带角框的更多相关文章

  1. Android UI（五）云通讯录项目之联系人列表，带侧滑选择，带搜索框

    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节.交流QQ群:[编程之美 365234583]h ...

  2. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  3. element-ui 带单选框的表格

    效果:不只是带单选框,点击当前行单选框选中状态网上查了一些发现很多都是只能点击当前radio选中当前行,配合element-ui的单选table时发现两个的选择状态是不一致的,所以调整了一下效果 提供 ...

  4. 带三角形下标的提示框（按钮button）

    HTML:<div class="leaflet-popup-content-wrapper"> <div class="leaflet-popup-c ...

  5. 百度地图API显示多个标注点带检索框

    通过百度地图的api,可以在地图上显示多个标注点,并给所有的标注点实现了带检索功能的信息框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  6. 带搜索框的下拉框chosen.jQury.js

    下载所需js,css png资源     <link href="chosen.css" rel="stylesheet" type="text ...

  7. CSS奇思妙想图形（心形、气泡三角形、切角、梯形、饼图等）

    今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...

  8. 【Select2】带搜索框的下拉框美化插件

    1  引入js css 文件 <script src="js/jquery-1.11.1.min.js"></script> <script src= ...

  9. css制作三角形，下拉框三角形

    网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...

随机推荐

  1. GAT2.0使用文档（组合接口测试）

    3.2接口用例场景组件 在此之前,大家应该都已经开发完成了一个最简单的接口测试用例,但是之前的接口用例的期望结果是固定值,不能动态的去做对比,有很大局限性.下面开始介绍怎样通过场景组件来动态对测试结果 ...

  2. LR常见问题

    (1)LoadRunner录制脚本不弹出IE浏览器 当一台主机上安装多个浏览器时,LoadRunner录制脚本经常遇到打不开浏览器的情况,可以用下面的方法解决.启动浏览器,打开Internet选项对话 ...

  3. 如何从github上面拷贝源码

    有好奇心的朋友们一定都想看一看很多开源项目的源码,那么github就不用说啦,太多的开源项目都把源码放到上面. 博主最近为了学习angularjs也不得不去github上面弄源码,下面将会介绍如何做: ...

  4. Unity-Animator深入系列总索引

    花了不少时间完成了这篇Unity Animator学习系列文章,其中大多数内容都来自个人实践,包括API部分很多都是亲测,期望和网上的诸多教程达到互补. 相关参考文档 Unity Animator官方 ...

  5. <转>linux crontab 定时任务

    基本格式 : * * * * * command 分 时  日  月  周    命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 ...

  6. (转)Could not create the view: An unexpected exception was thrown. 电脑突然断电，myeclipse非正常关闭，出现错误

    问题:电脑突然断电,myeclipse非正常关闭,“Package Explorer”非正常显示,出现错误“Could not create the view: An unexpected excep ...

  7. 复旦大学2014--2015学年第二学期高等代数II期末考试情况分析

    一.期末考试成绩班级前几名 钱列(100).王华(92).李笑尘(92).金羽佳(91).李卓凡(91).包振航(91).董麒麟(90).张钧瑞(90).陆毕晨(90).刘杰(90).黄成晗(90). ...

  8. php中session机制的详解

    [补充]session_start()要放在php最前面,header()函数也要放在session_start()之后. [读了下面的文章转载的文章后自己的理解]: 1,通过phpinfo()函数可 ...

  9. js获取url中的参数值

    在博客园看家一片不错的文章:http://www.cnblogs.com/EnderH/p/5398409.html 在这里记下对自己比较有用的三种: 1.正则 function GetQuerySt ...

  10. c#入门笔记（1）数据类型

    1.c#有三种数据类型,分别是数值型,引用类型,指针类型. 2.数值类型 2.1整数类型:sbyte,byte,short,ushort ,int uint,long,ulong(u开头是无符号,范围 ...