.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. hbase启动报错

    前一段时间vmware上的ubuntu的hbase用不了了,而hadoop能正常的操作,非常的奇怪. 错误信息好像是connect fail, RPC什么的,看来跟网路有关. 想起以前曾经解决过hba ...

  2. IIS集成和经典配置

    检測到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式).  我们将ASP.NET程序从IIS6移植到IIS7,可能执行提示下面错误: HTTP 错误 500. ...

  3. linux和unix的对照

    在之前的博客中说到,linux是一个单一内核的操作系统,但它与传统的单一内核UNIX操作系统不同. 在普通单一内核系统中,全部内核代码都是被静态编译和链接的. 而在linux中,能够动态的装入和卸载内 ...

  4. 让透明div里的文字不透明

    最近在工作中遇到一个问题,我在div里写上文字,当我把div变为半透明的时候,里面的文字也会随之透明.情况如下: <div class="box"> 这是一段不应该透明 ...

  5. android学习笔记二、Activity深入学习

    一.创建和使用: 1.Activity是android的四大组件之一,需要继承Activity并在清单文件中进行声明才能使用.没有声明则报错. 2.启动Activity是通过Intent,有两种方式: ...

  6. 路径+DataRow+SqlPara防止sql注入

    绝对路径:是从盘符开始的路径,形如C:\windows\system32\cmd.exe相对路径:是从当前路径开始的路径,假如当前路径为C:\windows要描述上述路径,只需输入system32\c ...

  7. Windows10 Linux子系统的启用和中文用户名的修改

    一直用的虚拟机Linux,忽然心血来潮,看到Windows 10可以使用Linux子系统,于是来装一波,按照这位前辈的教程 https://blog.csdn.net/zhangdongren/art ...

  8. DotNetCore2.1 下Docker使用的学习

    [环节1:CentOS 安装Docker] Step1:通过 uname -r 命令查看你当前的内核版本 uname -r Step2:使用 root 权限登录 Centos.确保 yum 包更新到最 ...

  9. 使用acme.sh快速生成SSL证书

    起因 早上收到了一封来自MySSL EE <noreply@notify.myssl.com>的邮件提示证书即将过期, 少于7天,但是acme.sh应该是60天自动renew的.于是查看下 ...

  10. C# textBox控件只允许为数字和小数点并且提取出这个数字

    一. textBox控件实现只允许为数字和小数点 如下图所示,在textBox控件框内输入只能是 要在textBox控件属性设置按键按下的事件触发,如下图所示: 二.源代码 textBox控件只允许为 ...