纯CSS 三角形箭头Div边框代码

<html>

<head>

<title>纯CSS实现 “三角箭头”代码</title>

<meta http-equiv="Content-Language" content="zh-CN"/>

<mce:style type="text/css"><!--

span {_overflow:hidden;}

.wp {position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;}

.arrow {position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent

red transparent;}

--></mce:style>

<style  type="text/css" _mce_bogus="1">

<!--

span {_overflow:hidden;}

.wp {position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;}

.arrow {position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent

red transparent;}

--></style>

</head>

<body>

<div style="padding: 40px; background:#fff;" _mce_style="padding: 40px; background: #fff;">

<div class="wp">

<span class="arrow"></span>“三角形箭头”例1</div>

<div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;" _mce_style="position: relative; background: red; padding: 20px; color: #fff; margin-

bottom: 30px;">

<span style="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent

transparent red transparent;" _mce_style="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid dashed transparent transparent

red transparent;"></span>“三角形箭头”例1</div>

<div style="position: relative; border: 4px solid red; padding: 20px; margin-bottom: 30px;" _mce_style="position: relative; border: 4px solid red; padding: 20px; margin-bottom:

30px;">

<span style="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent

transparent red transparent;" _mce_style="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid dashed transparent transparent

red transparent;"></span><span style="position: absolute; left: 30px; top: -27px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed;

border-color: transparent transparent #FFF transparent;" _mce_style="position: absolute; left: 30px; top: -27px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid

dashed transparent transparent #FFF transparent;"></span>“三角形箭头”例2</div>

<div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;" _mce_style="position: relative; background: red; padding: 20px; color: #fff; margin-

bottom: 30px;">

<span style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed dashed solid; border-color: transparent

transparent transparent red;" _mce_style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed dashed solid transparent transparent

transparent red;"></span>“三角形箭头”例3</div>

<div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;" _mce_style="position: relative; background: red; padding: 20px; color: #fff; margin-

bottom: 30px;">

<span style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border-width: 16px 24px; border-style: dashed dashed dashed solid; border-color: transparent

transparent transparent red;" _mce_style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border: 16px 24px dashed dashed dashed solid transparent

transparent transparent red;"></span><span style="position: absolute; left: 14px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid

dashed; border-color: transparent transparent #fff transparent;" _mce_style="position: absolute; left: 14px; top: -32px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid

dashed transparent transparent #fff transparent;"></span>“三角形箭头”例4</div>

<div style="position: relative; background: red; width: 160px; padding: 20px; color: #fff; margin-bottom: 30px;" _mce_style="position: relative; background: red; width: 160px;

padding: 20px; color: #fff; margin-bottom: 30px;">

<span style="position: absolute; left: 0px; top: -12px; width: 188px; height: 0; font-size: 0; border-width: 6px; border-style: dashed dashed solid dashed; border-color: transparent

transparent red transparent;" _mce_style="position: absolute; left: 0px; top: -12px; width: 188px; height: 0; font-size: 0; border: 6px dashed dashed solid dashed transparent transparent

red transparent;"></span>

模拟梯形边<span style="position: absolute; left: 0px; bottom: -12px; width: 188px; height: 0; font-size: 0; border-width: 6px; border-style: solid dashed dashed dashed; border-color:

red transparent transparent transparent;" _mce_style="position: absolute; left: 0px; bottom: -12px; width: 188px; height: 0; font-size: 0; border: 6px solid dashed dashed dashed red

transparent transparent transparent;"></span>

</div>

<h2>看看这个例子就会明白所谓“三角边”了</h2>

<div style="border-width:40px;border-style:solid;border-color:red green black blue;line-height:0;font-size:0;overflow:hidden;width:100px;height:0" _mce_style="line-height: 0; font-size:

0; overflow: hidden; width: 100px; height: 0; border: 40px solid red green black blue;"></div>

<h2>把某些边透明掉就可以模拟三角形了，注意ie6下透明的边要是dotted或dashed</h2>

<div style="border-width:40px;border-style:dashed dashed solid dashed;border-color:transparent transparent red transparent;line-height:0;font-size:0;width:0;height:0" _mce_style="line

-height: 0; font-size: 0; width: 0; height: 0; border: 40px dashed dashed solid dashed transparent transparent red transparent;"></div>

<div style="border-width:40px;border-style:dashed solid solid dashed;border-color:transparent blue red transparent;line-height:0;font-size:0;width:0;height:0" _mce_style="line-height:

0; font-size: 0; width: 0; height: 0; border: 40px dashed solid solid dashed transparent blue red transparent;"></div>

</div>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>

时间： 2024-10-19 04:55:46

纯CSS 三角形箭头Div边框代码的相关文章

纯CSS实现箭头、气泡让提示功能具有三角形图标（简单实例）

<style type="text/css"> /*向上箭头,类似A,只有三个边,不能指定上边框*/ .arrow-up { width: 0px; height: 0px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid yellow; /*以下属性可以是IE5兼容*/ font-size: 0px; line-heig

纯CSS制作加&lt;div&gt;制作动画版哆啦A梦

纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS.代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可以查看一下,每个线条及椭圆都是纯CSS代码生成. 首先分析结构 根据原图,将哆啦A梦分为几个结构,然后再分解其他部位. 画出各部分的形状和颜色,然后使用绝对定位(absolute)和相对定位(relative)改变其位置. 各种带弧度形状,使用border-radius属性实现. 倾斜角度,使用transf

纯css 画箭头

原理: 把容器的边框设置大一点,容器本身的长宽为0,只设置一边的颜色让其自然形成 箭头 参考文章 http://yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

纯CSS实现Tab切换标签效果代码

在线演示地址如下: http://demo.jb51.net/js/2015/css-tab-bq-style-cha-codes/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/199

css：设置div边框透明+渐变

写作背景: 觅兼职--登陆页面,UI给的原型图很漂亮,其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框.效果图如下: 在写的时候遇到了一点小小的问题:无法给同一个div设置圆角的透明+渐变边框.但是,又不能不做是不是,费了一番心思查资料,下面是解决方案: 1.分成两个div叠加的形式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

CSS带箭头的DIV方框，自适应高度

<html><head><title>CSS实现带箭头的DIV方框</title><style>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

纯CSS+HTML制作网页加载动画

我们都知道网页的加载需要一定的时间, 即使我们在努力优化代码执行效率以及压缩文件, 但是还是需要时间啊,  在这段时间内如果表面上不发生任何事情, 用户就会有比较糟糕的体验, 但是如果有一个动画或者一个进度条, 那就完全不一样了, 这篇文章分享纯CSS+HTML加载动画代码 HTML代码如下 <div id="start-screen"> <div class="in-start"> <div class="first&quo

纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框

在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个边框,下面是是一篇完成的截图(不了解的可以看看:纯CSS实现tooltip提示框,CSS箭头及形状): 首先像:after一样我们介绍另外一个CSS中“ :before ”选择器 定义和用法:(参考w3school:before选择器) :before 选择器在被选元素的内容前面插入内容,使用 co

css+div打造三角形(箭头)

在很多网站都见过这样的箭头,之前我一直以为是图片,直到今天才知道原来可以用css做.开始看代码没太看懂,后来自己试了几遍才恍然大悟.贴出来分享下.(大神请直接忽略) 先看代码: HTML部分就是一个单纯的div. .sanjiao{ width:0px; height:0px; overflow:hidden; border-width:10px; border-color:transparent transparent blue transparent; border-style:dashed