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 ...

随机推荐

HTTP状态码,400,404,500,503
HTTP状态码(HTTP Status Code) 一些常见的状态码为: 200 - 服务器成功返回网页 400 服务器不理解请求的语法 404 - 请求的网页不存在 503 - 服务不可用所有状态 ...
72.2801 LOL-盖伦的蹲草计划(广搜)
时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题解查看运行结果题目描述 Description 众所周知,LOL这款伟大的游戏,有个叫盖伦的英雄.他的伟大之处在 ...
使用Spring配置shiro时,自定义Realm中属性无法使用注解注入解决办法
先来看问题纠结了几个小时终于找到了问题所在,因为shiro的realm属于Filter,简单说就是初始化realm时,spring还未加载相关业务Bean,那么解决办法就是将springmvc ...
微信小程序背景音频播放分享功能
如果正常背景音频播放的话,只能跳转到自己对应的微信小程序,无法分享朋友圈,我们需要设置分享朋友圈,需要调用一个API 音频背景播放注意:背景播放在锁屏后播放只支持IOS端,安卓端虽然可以播放,但是锁 ...
微信开发之如何使用开发工具--weixin-java-tools
一.前沿微信公众平台由于没有提供针对语言的开发包,只公布了一个基于Http协议的接口和加解密的算法sdk,这样给微信公众号的开发者带来很多工作量,除了实现业务逻辑外,还需要自己处理底层的接口协议细节 ...
FAQ：枚举和常规的值，到底哪种更符合程序使用？
问: 枚举和常规的值,到底哪种更符合程序使用? 答: 肯定是根据不同的场景,做出不同的选择. 如果是不同的值需要不同的逻辑,肯定是枚举好一些.如果只是表示某个取值范围且这个范围会动态变化,用常规的值 ...
更改Thunderbird的默认语言
使用的Thunderbird Poratable版本是英文的,可以用以下方式修改为中文界面: 1.下载中文语言包在官方网站的https://addons.mozilla.org/en-US/thun ...
Hibernate中@Embedded和@Embeddable注解
在使用实体类生成对应的数据库表时,很多的时候都会遇到这种情况:在一个实体类中引用另外的实体类,一般遇上这种情况,我们使用@OneToOne.@OneToMany.@ManyToOne.@ManyToM ...
GPGPU OpenCL 精确字符串查找
字符串查找是信息安全.信息过滤领域的重要操作,尤其是对大文本的实时处理.这篇作为实例,使用GPU OpenCL进行精确模式串查找. 1.加速方法 (1)将少量常量数据,如模式串长度.文本长度等,保存在 ...
SQL CROSS JOIN
最近在讲到T-SQL查询的Join部分时,一下子没有想起来CROSS JOIN的用法,因为其实平常也确实基本不用到.特意找了一个例子,以供参考 CROSS JOIN又称为笛卡尔乘积,实际上是把两个表乘 ...

CSS border 生成三角

CSS border 生成三角的更多相关文章

随机推荐

热门专题