<!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. tas5721 驱动

    Submitter Mark Brown Date March 31, 2016, 5:33 p.m. Message ID <E1algTO-0004Cm-Ga@finisterre> ...

  2. arraylist与linkedlist的区别与性能测试

    /** *arraylist和linkedlist的适用场合. **/ import java.util.List; import java.util.ArrayList; import java.u ...

  3. Intellij IDEA debug介绍

    先编译好要调试的程序. 1.设置断点 选定要设置断点的代码行,在行号的区域后面单击鼠标左键即可. 2.开启调试会话 点击红色箭头指向的小虫子,开始进入调试. IDE下方出现Debug视图,红色的箭头指 ...

  4. GZFramwork快速开发框架演练之会员系统(四)添加商品管理

    1.1:创建表结构 新建三张商品关联的表,表模型如下: 创建SQL语句略 1.2:生成表Model(生成方法见上一节) 1.3:生成tb_ProductType的单结构界面然后添加到项目中 1.4:修 ...

  5. How can I view currently running MySQL queries?（ 查看正在运行的MySQL语句/脚本命令）

    show processlist;show processlist\G;SHOW FULL PROCESSLIST;SHOW FULL PROCESSLIST\G; REF:http://dev.my ...

  6. C语言复杂声明

    C语言复杂声明 First step int *f(); /* f:是一个函数,它返回一个指向int类型的指针*/ int (*pf)(); /* pf:是一个指向函数的指针,该函数返回一个int类型 ...

  7. 中国Linux源镜像站大全

    原文链接:http://www.centoscn.com/yunwei/news/2012/1227/131.html 一.国内的linux源镜像站点: 1.企业源:阿里云开源镜像站: http:// ...

  8. Python之路 day2 初识字典

    #Author:ersa ''' key-value 键值对 字典是无序的,不需要下标,有key 字典的查找.修改.添加.判断.删除 ''' info = { 'stu1101': "Ten ...

  9. 如何禁用IE10的明文显示密码和快速清除功能

    IE10针对 <input>及<input type="password"> 分别提供了快速清除钮(X图标)以及密码文字显示钮(小眼睛图标)的功能: 快速清 ...

  10. 编程之美--2. Trie树 （Trie图）

    #1014 : Trie树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助, ...