用CSS来画空心三角形的方法
画这里三角形的方法:
用CSS来实现:整个弹框的ID是#favoriteOptionMenus,对于#favoriteOptionMenus这个元素设置:before和:after的样式,让:before和:after的样式偏移一个像素,就可以实现了
Html代码为:
<div id="favoriteOptionMenus" class="toolmenu">
<ul class="saveFilterWrap">
<li class="saveFilter">
<div class="form-group row">
<div class="col-xs-3 col-custom" id="saveSearchLabel"><label for="newFavoriteName">Save Search: </label></div>
<div class="col-xs-6 col-custom"><input class="form-control" id="newFavoriteName" maxlength="100" placeholder="Type filter name..."></div>
<div class="col-xs-3 col-custom" id="saveFilterButton">
<button id="btnSaveFavorite" class="btn btn-primary" style="margin-right: 10px;">
<span class="txt">Save</span>
</button>
</div>
</div>
</li>
<li class="separator"></li>
</ul>
<div class="form-group">
<label for="searchFilter">Saved Searches:</label><br />
<input class="form-control toolmenu" id="searchFilter" placeholder="Filter">
</div>
<ul class="toolmenu"></ul>
</div>
对应实现三角形的CSS代码为:
padding: 15px 10px;
width: 450px;
}
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: -24px;
left: 89px;
padding: 0;
border-bottom: 12px solid #FFFFFF;
border-top: 12px solid transparent;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
display: block;
content: '';
z-index: 12;
}
box-sizing: content-box;
width: 0px;
height: 0px;
position: absolute;
top: -26px;
left: 88px;
padding: 0;
border-bottom: 13px solid #9c9999;
border-top: 13px solid transparent;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
display: block;
content: '';
z-index: 10;
}
用CSS来画空心三角形的方法的更多相关文章
- canvas之画一个三角形
<canvas id="canvas" width="500" height="500" style="background ...
- CSS画一个三角形,CSS绘制空心三角形,CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
- Effective前端3:用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- Effective前端(3)用CSS画一个三角形
来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以 ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
随机推荐
- html5中的input和label写法与取值
demo 效果图如上 label是html5特有的,是定义 input 元素的标注.凡是input前面要有个label标识下,label和input真是一对好兄弟啊.<label> 标签的 ...
- 图解CentOS系统启动流程
当我们按下开机键后,系统背后的秘密我们是否了解呢?这里,我带大家探索一下linux系统开机背后的秘密. 1.加电自检 主板在接通电源后,系统首先由POST程序来对内部各个设备进行检查,自检中如 ...
- 斯特林公式 ——Stirling公式(取N阶乘近似值)(转)
斯特灵公式是一条用来取n阶乘近似值的数学公式.一般来说,当n很大的时候,n阶乘的计算量十分大,所以斯特灵公式十分好用.从图中可以看出,即使在n很小的时候,斯特灵公式的取值已经十分准确. 公式为: ...
- 求教如何在win7 X64系统上安装.net 3.5 sp1
其实win7系统已自带net 3.5.1了.开始菜单——控制面板——程序——打开或关闭windows功能,找到Microsoft .NET Framework 3.5.1,去掉选项,确定.然后再进入“ ...
- DevExpress MemoEdit定位到末尾
1: /// <summary> 2: /// 追加文本到MemoEdit中 3: /// </summary> 4: /// <param name="mem ...
- spark基础---->spark的第一个程序
这里面我们介绍一下spark的安装,并通过一个python的例子来简单的体会一下spark的使用. spark的安装与使用 安装环境:mac 10.13.6,spark版本:2.3.1,python版 ...
- Elasticsearch 学习之不停止服务,完成升级重启维护操作
我们可以设置集群的平衡参数来暂时禁用掉平衡,具体步骤如下: 1.如果可能的话,先暂停掉数据新增和更新操作,这样会提高集群恢复的时间: 2.禁用集群分片平衡操作,直到告诉集群可以恢复平衡操作为止,禁用配 ...
- POJ 1958 Strange Towers of Hanoi
Strange Towers of Hanoi Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 3784 Accepted: 23 ...
- Tarjan 强连通分量 及 双联通分量(求割点,割边)
Tarjan 强连通分量 及 双联通分量(求割点,割边) 众所周知,Tarjan的三大算法分别为 (1) 有向图的强联通分量 (2) 无向图的双联通分量(求割点,桥) ...
- 今天看到的一些js的用法
以下是今天学习到的一些js语法,特整理出来. 1. (10)["toString"]() === "10" // true 2.如何优雅的取整 var a = ...