.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. ArcGIS api for javascript——用第二个服务的范围设置地图范围

    描述 本例展示了如何设置地图的范围为地图其中一个图层的范围.本例有两个图层:ArcGIS Online上的世界地图图层ArcGISTiledMapServiceLayer和堪萨斯州的要素的图层ArcG ...

  2. IDEA创建maven项目之后无法编写java类

    在创建Maven web项目之后无法再java文件夹下面创建java类,这里我可以教一下大家 选择你的文件夹,鼠标点击右键,出现下图所显示的,你可以按照下图所显示的步骤进行操作

  3. AngularJS初接触

    todo.json [ { "action": "Buy Flowers", "done": false }, { "action ...

  4. 关于checkbox的一些jquery操作

    表单在前端开发中是经常会遇到的,其中自然也少不了checkbox复选框,对于复选框的操作无外乎有以下三种:全选,全不选,反选.下面零度逍遥就给大家分析分析. 一.checkbox全选 大家都知道选择c ...

  5. IntelliJ IDEA springmvc demo

    construction pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=" ...

  6. Scrapy框架使用代理

    使用代理抓取https://www.baidu.com/s?wd=ip # -*- coding: utf-8 -*- ''' 一.在settings.py中开启中间件 DOWNLOADER_MIDD ...

  7. 紫书 例题 9-1 UVa 1025 ( DAG的动态规划)

    影响到状态的只有时间和在哪个车站(空间),所以可以设f[i][j]是时刻i的时候在第j个车站的最少等待时间 因为题目中的等待时间显然是在0时刻1车站,所以答案为f[0][1],那么就提醒我们从大推到小 ...

  8. Swift实战(2)--在工程中添加object-C的类或者第三方框架(附翻译)

    原文地址:http://stackoverflow.com/questions/24002369/how-to-call-objective-c-code-from-swift Using Objec ...

  9. Jetty 类载入问题处理

    前几日使用 Jetty (9.2)部署公司一个 web 项目,这个项目原本部署在 Tomcat server上,一切正常,可是部署到 Jetty 后,启动报错.关键错误信息为"java.la ...

  10. bzoj2938【Poi2000】病毒

    2938: [Poi2000]病毒 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 345  Solved: 176 [Submit][Status][ ...