<!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. adpatch options=hotpatch

    --no need to shutdown application and no need to enable maintenance mode adpatch options=hotpatch fi ...

  2. Linux中/proc目录下文件详解

    转载于:http://blog.chinaunix.net/uid-10449864-id-2956854.html Linux中/proc目录下文件详解(一)/proc文件系统下的多种文件提供的系统 ...

  3. Tomcat常见的内存溢出，以及解决方法

    一.常见的三种内存溢出错误: 1.java.lang.OutOfMemoryError:java heap space    ====JVM Heap(堆)溢出 JVM再启动的时候回自动设置JVM H ...

  4. RecyclerView使用总结

    遇到的异常: java.lang.ExceptionInInitializerError静态块初始化异常 NetworkOnMainThreadException访问网线不能在主线程中进行 我的参考资 ...

  5. Java菜鸟培训第二天

    HTML——超文本标记语言…………… 静态网页:不需要访问数据库. 动态网页:在网上发布的好的,我们能通过网络浏览到的都是动态的,需要访问数据库. <html>--开始标签 <hea ...

  6. SpringMvc xml 配置

    <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" ...

  7. VS2010/2012配置优化记录笔记

    VS2010/2012配置优化记录笔记 在某些情况下VS2010/2012运行真的实在是太卡了,有什么办法可以提高速度吗?下面介绍几个优化策略,感兴趣的朋友可以参考下,希望可以帮助到你   有的时候V ...

  8. 【leetcode❤python】 414. Third Maximum Number

    #-*- coding: UTF-8 -*- #l1 = ['1','3','2','3','2','1','1']#l2 = sorted(sorted(set(l1),key=l1.index,r ...

  9. 【Unity】常用代码

    //父子节点相关的: parent 变量表示Transform的父节点 root 表示它的根节点,如果没有父节点,它会返回自己 //根据名字查找子节点 Transform Find(string na ...

  10. Cheatsheet: 2015 10.01 ~ 10.31

    .NET Publishing your ASP.NET App to Linux in 5 minutes with Docker Integrating AngularJS with ASP.NE ...