.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. centos同步网络北京时间

    sudo yum -y install ntpdate ntp sudo ntpdate time.windows.com sudo hwclock -w

  2. Hadoop HDFS (4) Hadoop Archives

    用HDFS存储小文件是不经济的,由于每一个文件都存在一个block里,每一个block的metadata又在namenode的内存里存着,所以,大量的小文件.会吃掉大量的namenode的内存.(注意 ...

  3. 使用Hadoop ACL 控制訪问权限

    使用Hadoop ACL 控制訪问权限 一.HDFS訪问控制 hdfs-site.xml设置启动acl <property>  <name>dfs.permissions.en ...

  4. 使用 gradle 在编译时动态设置 Android resValue / BuildConfig / Manifes中&lt;meta-data&gt;变量的值

    转载请标明出处:http://blog.csdn.net/xx326664162/article/details/49247815 文章出自:薛瑄的博客 你也能够查看我的其它同类文章.也会让你有一定的 ...

  5. vim基础学习之EX命令

    :tabnew -创建新标签 :split(sp)-垂直分割窗口 如果没有打开新的文件,那么会打开原来窗口的文件 :vsplit(vsp)-水平分割窗口 如果没有打开新的文件,那么会打开原来窗口的文件 ...

  6. impala 概述

    impala 概述 什么是Impala? Impala是用于处理存储在Hadoop集群中的大量数据的MPP(大规模并行处理)SQL查询引擎. 它是一个用C ++和Java编写的开源软件. 与其他Had ...

  7. mybatis+springmvc+sqlite一个累心的问题:不在纠结

    1 java.sql.SQLException: NYI 2 org.sqlite.RS.getColumnClassName(RS.java:269) 在配置mybatis+springmvc+sq ...

  8. React开发实时聊天招聘工具 -第五章 需求分析

    Axios的使用 axios.get('/data') .then(res=>{ if(res.status==200) this.setState(data:res.data) })

  9. Markdown---语法小记

    在CSDN上的文章如今都习惯使用Markdown来编写比較方便美观.这里小结下常见的Markdown语法下: 1.标题: 方式1 # H1 ## H2 ### H3 #### H4 ##### H5 ...

  10. jquery源码12 offset() : 位置和尺寸的方法

    // Back Compat <1.8 extension point jQuery.fx.step = {}; if ( jQuery.expr && jQuery.expr. ...