CSS border 生成三角
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{ margin:20px 0 20px 20px;} .a{width:0; height:0; line-height:0; border-width:10px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;} .b{width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;} .c{width:10px; height:10px; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;} .d{width:0; height:0; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;} .e{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ffffff #ffffff #ffffff;} .f{width:0; height:0; line-height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;} </style> </head> <body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div> </div> </body>
</html>
效果图:矩形框中依次渐变演示了最上面的那个图形的形成过程
css模拟圆角(适合边框和背景一样的圆角,对精密程度要求不高的)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
/*div{ margin:20px 0 20px 20px;}*/ .box{width:500px;}
.top{border-bottom:3px solid; border-top-color:#cc0000; border-bottom-color:#cc0000; border-left:3px dotted transparent; border-right:3px dotted transparent;}
.center{padding:10px 20px; color:white; font-size:14px; background:#cc0000;}
.bot{border-top:3px solid; border-top-color:#cc0000; border-bottom-color:#cccccc; border-left:3px dotted transparent; border-right:3px dotted transparent;} </style> </head> <body> <div class="box">
<div class="top"></div>
<div class="center">我是一只小小鸟、小小鸟!</div>
<div class="bot"></div>
</div> </div> </body>
</html>
效果图:
把div的边距拉大后会看的更清楚哦
改进:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.fl{ float:left;} .box{width:400px; margin:200px auto;}
.box .right .top{border-bottom:3px solid; border-top-color:#cc0000; border-bottom-color:#cc0000; border-left:3px dotted transparent; border-right:3px dotted transparent;}
.box .right .center{padding:100px 20px; color:white; font-size:14px; background:#cc0000;}
.box .right .bot{border-top:3px solid; border-top-color:#cc0000; border-bottom-color:#cccccc; border-left:3px dotted transparent; border-right:3px dotted transparent;} .box .left{ width:0; height:0; line-height:0; margin-top:20px; border-top:10px solid white; border-right:20px solid #cc0000; border-bottom:10px solid white; border-left:10px solid white;} </style> </head> <body> <div class="box">
<div class="left fl"></div>
<div class="right fl">
<div class="top"></div>
<div class="center">我是一只小小鸟、小小鸟!</div>
<div class="bot"></div>
</div>
<div style="clear:both;"></div>
</div> </div> </body>
</html>
效果图:
原文地址:http://www.zhangxinxu.com/wordpress/?p=794
CSS border 生成三角的更多相关文章
- 利用css中的border生成三角,兼容包括IE6的主流浏览器
1.生成四个不同颜色方向的梯形 #ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #3 ...
- CSS border三角、圆角图形生成技术简介
http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...
- css制作小三角
视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...
- div+css做出带三角的弹出框 和箭头
一.三角形 https://blog.csdn.net/Szu_AKer/article/details/51755821 notice:三角的那部分可以用图片作为背景,但是容易出现杂边.所以利用cs ...
- CSS之生成全屏背景图片
在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...
- CSS border边框属性教程(color style)
CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...
- css border
CSS border用于设置HTML元素(如div)的边框,包括边框的宽度.颜色和样式.本文章向码农介绍CSS border边框属性详细内容,感兴趣的码农可以参考一下. CSS 边框即CSS bord ...
- border做三角符号
用border做三角符号以及其他图形 ;; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffff ...
- 【css样式生成 & 图片合并压缩工具】Sprite,你值得拥有
好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirt ...
随机推荐
- 没有调用PageHelper.startPage()分页方法,最后还是执行了PageHelper分页方法的原因
SELECT * FROM ( SELECT TMP_PAGE.*, ROWNUM ROW_ID FROM ( SELECT * FROM ( SELECT A.*, ROWNUM RN FROM ( ...
- 一次经典的tcp三次握手
TCP报头 在三次握手中使用的字段: 32位序列号 seq:表示的是本次报文发送的数据的第一个字节的序号. 32位确认号:ack 表示期望下一次应该接受到的报文的第一个字节的序号,若ack = N则 ...
- YII 关联查询
通过外键自己关联自己
- MySQL之char、varchar和text的设计
最近有表结构设计中出现了varchar(10000)的设计引起了大家的讨论,我们下面就来分析分析. 首先我们先普及一下常识: 1.char(n)和varchar(n)中括号中n代表字符的个数,并不代表 ...
- NSDictionary , NSMutableDictionary, NSMutableDictionary 和 NSMutableSet)相当于java的map、set
1 NSDictionary 和 NSMutableDictionary NSDictionary :就是java中的map; 放入对象是键值对 key-value , 同样 秉持了一样的原则,只 ...
- spring整合mybatis是如何配置事务的?
作者:郭无心链接:https://www.zhihu.com/question/30206875/answer/84675373来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- sqlserver获取指定数据库的描述
SELECT 字段名= convert(varchar(100), a.name), 表名= convert(varchar(50), d.name ), 类型= CONVERT(varchar(50 ...
- Jolokia
Jolokia 是一个用来访问远程 JMX MBeans 的崭新方法,与 JSR-160 连接器不同的是,它使用基于 HTTP 的 JSON 格式作为通讯协议,提供 JMX 批量操作等.需要第三方ja ...
- C++内存管理学习堆和栈
来源:http://c.chinaitlab.com/basic/936306_2.html 一 C++内存管理 1.内存分配方式 在讲解内存分配之前,首先,要了解程序在内存中都有什么区域,然后再详细 ...
- Orchard运用 - 导入旧随笔导致归档的问题
归档功能对于一个博客App这应该必须有的需求,故此Orchard中博客模块默认实现这一特性并通过一个叫"Blog Archives" widget, 你可以将其安装博客主页的侧边栏 ...