文档章节

CSS3 制作三角形

施长成
 施长成
发布于 2015/04/12 11:43
字数 434
阅读 11
收藏 0

最近闲来无事,突然想了解如何制作三角形

首先我们通过下面的例子来了解一下border[也许你会说border的属性谁不会啊?属性大家度会用,但是一个特性你可能没有发现,而这个特性就是制作三角形的关键,大神级的请忽略这个]

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三角形</title>
    <style type="text/css">
        .triangle{
             border-bottom: 20px solid #000000;
             border-top: 20px solid transparent;
             border-right: 20px solid #ffff00;
         }
        .triangle1{
            border-right: 20px solid #ffff00;
        }

        .triangle2{
            border-bottom: 20px solid #000000;
            border-right: 20px solid #ffff00;
        }
    </style>
</head>
<body>

<p class="triangle" style="height: 120px;width: 120px;background-color: red;"></p>
<p class="triangle1" style="height: 120px;width: 120px;background-color: red;"></p>
<p class="triangle2" style="height: 120px;width: 120px;background-color: red;"></p>

</body>
</html>

效果:

嘿嘿,不知道通过这三个图片你们有没有发现什么?在两个边框的交界处会出现一个三角形。

因此我们可以通过这个特性来得到一个三角形。

具体:一个边框使用背景色,一个边框使用透明的,这样就会形成一个三角形,但是当你给这个div一个高度时,你会发现你得到的是一个梯形,这时你需要取消这个div的高度,这样就能到三角形。至于三角形所对应的方向可以通过 transform 这个属性来旋转。

 <style type="text/css">
        .triangle{
             border-bottom: 20px solid #000000;
             border-top: 20px solid transparent;
             border-right: 20px solid #ffff00;
         }
 </style>
<p class="triangle" style="height: 120px;width: 120px;background-color: red;">


最后给大家一个网站 是最有腾讯QQ LOGO的文章,比较实用。通过这个文章以及源码你可以制作多种图形。

http://www.alloyteam.com/wp-content/demos/css3-tencent-qq-logo-basic/

加油 


© 著作权归作者所有

共有 人打赏支持
施长成
粉丝 5
博文 65
码字总数 23983
作品 0
浦东
后端工程师
使用CSS3打造的精美特效盘点,部分有中文制作教程及源码

CSS3可以帮你完成很多你意想不到的东西,有些甚至瞬间秒杀了你的眼睛。如果你对 WEB前端感兴趣,为何不尝试自己用CSS3弄个小玩意儿,分享给你的朋友?其实我想表达的是,CSS3可以充分挖掘你的...

tp_wire
2012/04/16
0
0
制作CSS气泡框

气泡状文本框,是一种很生动的网页设计手段。 它可以用来表示用户的发言。 也可以用来作为特定信息的提示符。 DVD租借网站Netflix,还用它显示碟片的详细信息。 ========================= ...

阮一峰
2010/04/03
0
0
令人难以置信的纯 CSS3 图标

尽管被批评为走火入魔,CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计,如果你看到本文介绍的这些精美图标,你绝对不会相信它们完全是由 CSS3 代码生成的。尤其是那套由 Loui...

古欣
2010/09/13
1K
6
WEB前端学习面试:CSS绘制平行四边形

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/13
0
0
16 个新鲜的 CSS3 在线教程

用CSS3制作令人印象深刻的产品展示 使用jQuery和CSS3制作闪亮的旋钮控制 使用 CoffeeScript 创建一个类 iOS 的界面 使用 CSS3 制作报纸阅读 制作一个 CSS3 动画菜单 使用 jQuery 和 CSS3 制作...

红薯
2012/04/29
6K
4

没有更多内容

加载失败,请刷新页面

加载更多

Java的快速失败和安全失败

一:快速失败(fail—fast) 在用迭代器遍历一个集合对象时,如果遍历过程中对集合对象的内容进行了修改(增加、删除、修改),则会抛出Concurrent Modification Exception。 原理:迭代器在...

狼王黄师傅
21分钟前
5
0
Echarts X轴Y轴配置参数详情

mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFamily:"sans......

wqzbxh
23分钟前
2
0
解决kettle使用JDBC读取Oracle速度慢的问题

jdbc连接添加如下信息: defaultRowPrefetch=20000

了凡川
27分钟前
1
0
Linux学习-1015

8.10 shell特殊符号cut命令 8.11 sort_wc_uniq命令 8.12 tee_tr_split命令 8.13 shell特殊符号下 相关测验题目:题目:http://ask.apelearn.com/question/5437 扩展 扩展 1. source exec 区别...

wxy丶
28分钟前
2
0
Spring Boot核心注解讲解

Spring Boot核心注解讲解 Spring Boot最大的特点是无需XML配置文件,能自动扫描包路径装载并注入对象,并能做到根据classpath下的jar包自动配置。 所以Spring Boot最核心的3个注解就是: 1,...

DemonsI
34分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部