css实现小三角效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻标题实例</title>
<style type="text/css">
#demo{
width:100px;
height:100px;
border: 2px #000 solid;
background-color:#fff;
position:relative;
}
#demo:before, #demo:after{
width:0px;
height:0px;
border:transparent solid;
position:absolute;
left:100%;
content:""
}
/*注意content虽然没有值,但是必须得加上*/
#demo:before{
border-width:10px;
border-left-color: #000;
top:20px;
}
#demo:after{
/* border-width:8px; 是为了覆盖黑色的框。*/
border-width:8px;
border-left-color: #fff;
top:22px;
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
</html>
css实现小三角效果的更多相关文章
- 如何使用CSS实现小三角形效果
如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...
- css实现小三角(原理)
效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...
- css制作小三角
视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...
- CSS的小三角
上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...
- 用CSS制作小三角提示符号
今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...
- 纯css制作小三角
在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...
- CSS实现小三角小技巧
<style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...
- CSS生成小三角
前言:小三角的应用场景:鼠标移动到某个按钮上面,查看信息详情时,信息详情弹出框有时候会需要一个小三角. 代码如下: <div id='triangle'></div> #tri ...
- css 兼容小三角
<!DOCTYPE><html ><head><meta http-equiv="Content-Type" content=" ...
随机推荐
- codevs 1725 探险 (二分)
/* 二分答案 这个题目要求“体力和最小的那个小组的所有人的体力和尽量大” 很明显我们二分最小体力 如果合法 逐渐放大 但是这里我们二分的是最小而不是最大 所以累加的体力>=ans时 跳过当前体 ...
- Bootstrap Modal 框 alert confirm loading
/** * Created by Administrator on 2016/5/4. */ /** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div ...
- C# Word常用操作(转)格式设置
一.word文档表格操作.分页及换行 //合并单元格table.Cell(2, 2).Merge(table.Cell(2, 3)); //单元格分离 object Rownum = 2;object ...
- strace 使用
- Js 旋转平滑特效
效果图 源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 【USACO 3.1.4】形成的区域
[描述] N个不同的颜色的不透明的长方形(1 <= N <= 1000)被放置在一张宽为A长为B的白纸上.这些长方形被放置时,保证了它们的边于白纸的边缘平行.所有的长方形都 ...
- 动态内存分配(new)和释放(delete)
在之前我们所写过的程序中,所必需的内存空间的大小都是在程序执行之前就已经确定了.但如果我们需要内存大小为一个变量,其数值只有在程序运行时 (runtime)才能确定,例如有些情况下我们需要根据用户输入 ...
- 8个不可不知的Mac OS X专用命令行工具(转)
OS X的终端下通用很多Unix的工具和脚本.如果从Linux迁移到OS X会发现很多熟悉的命令和脚本工具,其实并没有任何区别. 但是OS X也提供了很多其他系统所没有的特别的命令行工具.我们推荐8个 ...
- head First HTML与CSS读书笔记
调整图片大小 有滚动条的图片可给不了好的用户体验,为了让图片的大小更适合浏览器窗口.这时候就需要对图片的大小进行调整看书之前.我调整图片大小的方式是在<img>元素使用 width 和 h ...
- Win7 64位 php-5.5.13+Apache 2.4.9+mysql-5.6.19 配置
一 :准备阶段 1:php php-5.5.13下载链接:http://windows.php.net/downloads/releases/php-5.5.13-Win32-VC11-x64.zip ...