.square{
width:;
height:;
margin:0 auto;
border:6px solid transparent;
border-bottom: 6px solid red; //自行调整方向,.
}

带缺口的三角形:

<div class="box b1"></div>
<div class="box b2"></div>
.box{
position: absolute;
left:;
top:;
width:;
height:;
border: 6px solid transparent;
}
.b1{
border-bottom-color:#000 ;
}
.b2{
border-bottom-color:#fff ;
}

css实现一个缺口小三角的更多相关文章

  1. CSS创建三角形(小三角)的几种方法

    你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...

  2. css直接写出小三角

    在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!先看看如何写出各种小三角! /*箭头向上*/ .arrow-up { ; ; border-lef ...

  3. css border属性做小三角标

    <!doctype html><html> <head> <title></title> <meta charset="ut ...

  4. 一个常见下拉菜单的样式:一体化小三角(纯css手写解决)

    类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...

  5. css实现小三角(原理)

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  6. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  7. 【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框

    在网页中,常常会用到各种Icon,假设老是麻烦设计狮画出来不免有些不好意思,所以有时候我们也能够用CSS写出各种简单的形状.一来能够减轻他们的负担,二来也能够使用CSS替代图片.提高载入速度. 在网页 ...

  8. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  9. CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. C# DataTable中按字符串中的数字排序

    例如datatable中有一列是门牌号格式是xx-xx-xx,或字符串中含有汉字或其他符号等等,如何按照正确的数字顺序排序呢? 1.获得字符串中的数字. 2.在datatable中添加一列,类型是In ...

  2. 网络载入数据和解析JSON格式数据案例之空气质量监測应用

    一.创建一个新的项目 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res ...

  3. VC:当前不会命中断点,还没有为该文档载入不论什么符号

    VS2013中设置的断点无效:"当前不会命中断点,还没有为该文档载入不论什么符号".问题主要出在没有生成调试信息.解决方法例如以下: (1)项目-〉属性-〉配置属性-〉C/C++- ...

  4. hdu 思维风暴

    点击打开链接 偶然在杭电上看到的题目,数学题.好像是一道六年级奥赛题目,反正我是没有想出来,也知道往那上面想.就是找不到规律啊.学习了网上的方法, 这道题须要求出来多添加的点,就是与之前每条边添加的点 ...

  5. IDEA中的maven web 项目中如何设置自己的本地仓库

    我们在创建maven项目的时候如何不使用系统指定的本地仓库,而使用自己设置的仓库呢,这里小女子就来进行讲解一下吧! 讲解一:你要想找到settings.xml你就要自己我去官网上去下载apache-m ...

  6. hdoj--5053--the Sum of Cube(水)

    the Sum of Cube Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Tot ...

  7. nginx大量TIME_WAIT的解决办法--转

    原文地址:http://liuyieyer.iteye.com/blog/2214722?utm_source=tuicool&utm_medium=referral 由于网站使用nginx做 ...

  8. Ionic2集成ArcGIS JavaScript API.md

    1. Ionic同原生ArcGIS JavaScript API结合 1.1. 安装esri-loader 在工程目录下命令行安装: npm install angular2-esri-loader ...

  9. 远程带参数POST访问接口,返回数据

    1. string token = GetRequest.GetString("token"); int customer_id = GetRequest.GetInt(" ...

  10. “==”和Equals区别

    相信很多朋友在面对,对象判等时经常会犹豫是用“==”还是Equals呢?有时候发现两者得到的结果相同,但有时候有不同, 究竟在什么情况下"==" 会相等,什么情况下Equals会不 ...