css实现一个缺口小三角
.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实现一个缺口小三角的更多相关文章
- CSS创建三角形(小三角)的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
- css直接写出小三角
在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!先看看如何写出各种小三角! /*箭头向上*/ .arrow-up { ; ; border-lef ...
- css border属性做小三角标
<!doctype html><html> <head> <title></title> <meta charset="ut ...
- 一个常见下拉菜单的样式:一体化小三角(纯css手写解决)
类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...
- css实现小三角(原理)
效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...
- css border制作小三角形状及气泡框(兼容IE6)
先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...
- 【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
在网页中,常常会用到各种Icon,假设老是麻烦设计狮画出来不免有些不好意思,所以有时候我们也能够用CSS写出各种简单的形状.一来能够减轻他们的负担,二来也能够使用CSS替代图片.提高载入速度. 在网页 ...
- 纯css写带小三角对话框
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...
- CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- Spark修炼之道(高级篇)——Spark源代码阅读:第十二节 Spark SQL 处理流程分析
作者:周志湖 以下的代码演示了通过Case Class进行表Schema定义的样例: // sc is an existing SparkContext. val sqlContext = new o ...
- Effective JavaScript Item 40 避免继承标准类型
本系列作为Effective JavaScript的读书笔记. ECMAScript标准库不大.可是提供了一些重要的类型如Array,Function和Date.在一些场合下.你或许会考虑继承当中的某 ...
- rgba
正反两面展示效果 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...
- SFDC 微服务实践之路 2016.12.10 杭州(整理)--转
原文地址:http://mp.weixin.qq.com/s/8cC4Ewt6yPjnxdYxuNZlFQ 微服务是什么? 微服务是一种细粒度(Fine-Grain)的SOA 或许在座的高朋了解过其概 ...
- C# 从磁盘中读取文件
读取txt文件 ------读取的数据比较小的时候: 如果你要读取的文件内容不是很多,可以使用 File.ReadAllText(filePath) 或指定编码方式 File.ReadAllText( ...
- 170703 锐姿公司winserver2012 标准版安装过程
背景: 锐姿公司一台服务器,配置为:X3650M5 8871 E5 2620V4 32G 双电源 3*1T raid5 . 原系统由供应商(日闹)上家安装,在安装好的SQL2008,到 ...
- ES6特性-对比两个值是否相等
因为JavaScript中有语言缺陷,所以出了个Object.is()
- 【J-meter】参数及相应数据中文显示乱码问题
参考资料: http://www.51testing.com/html/00/130600-1360743.html http://www.cnblogs.com/fengpingfan/p/5851 ...
- 基于promise用于浏览器和node.js的http客户端的axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支 ...
- win10 WmiPrvSE.exe WMI Provider 占用CPU过高的问题
重启 Windows Management Instrumentation 服务 重启 WMI service. + ,输入: "services.msc" ,按 . 在 服务 ...