A-A+

纯CSS无图片三角形

2015年10月13日 htmlcss 暂无评论 阅读 118 次

纯CSS无图片带箭头的DIV方框

<html>
<head>
<title>纯CSS无图片带箭头的DIV方框</title>
<style>
div.container{position:absolute;
top:30px;
left:40px;
font-size: 9pt;
display:block;
height:100px;
width:200px;
background-color:transparent;
*border:1px solid #666;
}
s{
position:absolute;
top:-20px;
*top:-22px;
left:20px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #666 transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
i{position:absolute;
top:-9px;
*top:-9px;
left:-10px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #fff transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
.content{
border:1px solid #666;
-moz-border-radius:3px;
-webkit-border-radius:3px;
position:absolute;
background-color:#fff;
width:100%;
height:100%;
padding:5px;
*top:-2px;
*border-top:1px solid #666;
*border-top:1px solid #666;
*border-left:none;
*border-right:none;
*height:102px;
box-shadow: 3px 3px 4px #999;
-moz-box-shadow: 3px 3px 4px #999;
-webkit-box-shadow: 3px 3px 4px #999;
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
}
</style>
</head>
<body>
<div class="container">
<div class="content"><br>这是框中的文字,可动态显示。高度自动增加,应该不错吧^_^</div>
<s>
<i></i>
</s>
</div>
<br />
</body>
</html>
原文地址:http://www.oschina.net/code/snippet_125027_3637

CSS Border Triangle -- CSS边框绘制三角(箭头)的原理

自从用过CSS来画三角箭头后, 一直是复制/粘帖的别人写好的代码, 或是在网上用箭头生成器生成的CSS, 没有研究过其原理, 一直耿耿于怀, 如今终于有时间来一探究竟, 那简直是豁然开朗啊.

喜欢直接看完整代码 + 效果的同学可以组团走起去codepen

p9305355
CSS边框绘制三角箭头的原理

喜欢一步步解析的同学, 且听我罗嗦啰嗦.
1. 让我们见识下边框究竟是什么样子的

p9305355
神奇的边框是不是和你想象中的不一样啊?

2. 如果没有内容没有宽高的情况下, 仅剩边框又会是个什么造型?

p9305372

top right bottom left这4个边框其实是一个个三角形

3. 那么最后我们只要让不想看到的边框透明即可, 就这么简单
假设我们要指向下的三角箭头, 只要将right bottom left这3条边框透明即可, 其他方向的箭头处理也就类似了

p9305355

4. 关于三角形箭头的尺寸

p9305620
算下三角形的面积?

就这么多了, 其他情况在知晓原理的情况下, 大家随机应变吧...

更多内容请参考
----------------------
* Animation to Explain CSS Triangles
* Creating Triangles in CSS
* Pure CSS Triangles
* The Shapes of CSS
* 纯CSS实现各类气球泡泡对话框效果
* 三角形变形记之纯css实现的分布导航条效果
* CSS Refreshers: Borders
- Border Basics
- Border-Radius
- Multiple Borders
- CSS Shapes

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录