<!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 生成三角的更多相关文章

  1. 利用css中的border生成三角，兼容包括IE6的主流浏览器

    1.生成四个不同颜色方向的梯形 #ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #3 ...

  2. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

  3. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  4. div+css做出带三角的弹出框 和箭头

    一.三角形 https://blog.csdn.net/Szu_AKer/article/details/51755821 notice:三角的那部分可以用图片作为背景,但是容易出现杂边.所以利用cs ...

  5. CSS之生成全屏背景图片

    在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...

  6. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  7. css border

    CSS border用于设置HTML元素(如div)的边框,包括边框的宽度.颜色和样式.本文章向码农介绍CSS border边框属性详细内容,感兴趣的码农可以参考一下. CSS 边框即CSS bord ...

  8. border做三角符号

    用border做三角符号以及其他图形 ;; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffff ...

  9. 【css样式生成 & 图片合并压缩工具】Sprite，你值得拥有

    好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirt ...

随机推荐

  1. asp.net 去除数据中带有的html标签

    1,在控制器中实现去除html标签的静态方法 //去除html标签 public static string ReplaceHtmlMark(object Contents) { string Htm ...

  2. CROC 2016 - Elimination Round (Rated Unofficial Edition) D. Robot Rapping Results Report 二分+拓扑排序

    D. Robot Rapping Results Report 题目连接: http://www.codeforces.com/contest/655/problem/D Description Wh ...

  3. word2007-2010排版中解决段后插入分页符 新页首行空行问题

    word2007-2010排版中,很多人都会遇到 这个问题.当你在 段后插入分页符 想开启新的一页的时候,新页首行有个空行.如果删除,会连同分页符一起删除.不删除有影响排版美观.那怎么解决呢: 解决办 ...

  4. BR16F84 OBD II Interface Chip For PWM, VPW, and ISO 9141-2 Vehicles

    http://faq.ford77.ru/pdf/eec/DataSheet.pdf FEATURES:Operating Voltage 5.0 VOperating Current 5 Ma. T ...

  5. Installshield 2010 中集成. Net framework4 与 vc++ 2010运行安装包

    1.prq的地址,通过以下地址,下载相应的prq文件 VC 2010 redist X86: http://saturn.installshield.com/is/prerequisites/micr ...

  6. gitignore不起作用解决的方法

    前面有文章介绍了使用gitignore文件的方法,该文件表示过滤规则,可是对已经增加版本号库的文件不能生效,因此须要利用命令将想要忽略的文件从版本号库中删除,比方说.我们对androidproject ...

  7. Oracle经典查询案例

    1.创建一个学生管理数据库,名称为student 2.最少包括一下三张表 S (SNO,SNAME)学生关系.SNO 为学号,SNAME 为姓名 C (CNO,CNAME,CTEACHER)  课程关 ...

  8. ARMv7处理器各个模式之间是怎样切换的？模式切换时上下文的保存哪些是硬件在做？哪些是操作系统在做？

    1.ARM处理器各个模式之间是怎样切换的? 答:除用户模式外的其它6种模式称为特权模式,这些模式中,程序能够訪问全部系统资源,也能够随意进行处理器模式的切换.处理器模式能够通过软件控制进行切换(直接设 ...

  9. HBase系统架构及数据结构（转）

    原文链接:Hbase系统架构及数据结构 HBase中的表一般有这样的特点: 1 大:一个表可以有上亿行,上百万列 2 面向列:面向列(族)的存储和权限控制,列(族)独立检索. 3 稀疏:对于为空(nu ...

  10. Dockerfile命令

    Dockerfile分基础镜像信息.维护者信息.镜像操作指令.容器启动时执行指令 FROM 镜像名:标签 第一条指令必须时FROM MAINTAINER 维护者信息 RUN command或者RUN ...