<!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. Linux之常用快捷键

    tab:自动补齐命令或者路径 ESC+u:将字符小写变大写 ctrl+s:在终端中冻结stdin ctrl+q:在终端中恢复stdin ctrl+a:光标移动到行首 ctrl+e:光标移动到行尾 ct ...

  2. 11-JS基础

    JS声明变量 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不推荐这么做) 变量名称对大小写敏感(y 和 Y 是不同的变量) **提示:JavaScript 语句和 JavaScript 变量 ...

  3. centos7 Nexus maven私有仓库

    cd /home wget http://www.sonatype.org/downloads/nexus-latest-bundle.tar.gz mkdir nexus tar zxvf nexu ...

  4. Linux系统信息查看

    转自:http://blog.chinaitlab.com/html/31/1365331-180901.html 查看redhat版本:cat /etc/redhat-release或者cat /e ...

  5. odoo定时任务

    python代码 # -*- encoding: utf-8 -*- from openerp.osv import fields, osv, orm import logging _logger = ...

  6. linux 启动模式

    BLOS-->MBR(master boot record)主引导记录-->引导加载程序-->内核-->init process -->login

  7. 20160908_Redis主从复制Replication

    1.主从redis,安装配置都是一样的.下面开始从服务器的配置. 参考的网址为:http://yanliu.org/2015/08/27/Redis%E4%B8%BB%E4%BB%8E%E5%A4%8 ...

  8. Evolutionary Computing: 4. Review

    Resource:<Introduction to Evolutionary Computing> 1. What is an evolutionary algorithm? There ...

  9. SQL SERVER 查看所有index

    WITH INDEX_TABLE AS( as DatabaseID, o.name AS TableName, c.name AS ColumnName,ic.index_id,i.type_des ...

  10. C#虚方法

    若一个实例方法声明前带有virtual关键字,那么这个方法就是虚方法.虚方法与非虚方法的最大不同是,虚方法的实现可以由派生类所取代,这种取代是通过方法的重写实现的(以后再讲)虚方法的特点:虚方法前不允 ...