文档章节

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/

加油 


© 著作权归作者所有

共有 人打赏支持
下一篇: SocketIO 随笔
施长成
粉丝 5
博文 66
码字总数 24419
作品 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
CSS三角的写法(兼容IE6)

目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框。 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 7. 解决内联元素的三角显示问...

a1burning
11/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MYSQL索引

索引的作用 索引类似书籍目录,查找数据,先查找目录,定位页码 性能影响 索引能大大减少查询数据时需要扫描的数据量,提高查询速度, 避免排序和使用临时表 将随机I/O变顺序I/O 降低写速度,占用磁...

关元
12分钟前
0
0
撬动世界的支点——《引爆点》读书笔记2900字优秀范文

撬动世界的支点——《引爆点》读书笔记2900字优秀范文: 作者:挽弓如月。因为加入火种协会的读书活动,最近我连续阅读了两本论述流行的大作,格拉德威尔的《引爆点》和乔纳伯杰的《疯传》。...

原创小博客
24分钟前
2
0
《配电网自动化技术》第一章

写了配电网的组成、历程、难点、存在问题、解决方案,还是蛮好的。尤其是各地建设的系统后续又无法实用化,以及多种终端反而增加了运维工作量等,都是目前切实存在的让大家不停吐槽的内容。

max佩恩
29分钟前
1
0

中国龙-扬科
47分钟前
5
0
使用vuex的state状态对象的5种方式

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。 下面给大家来贴一下我的vuex的结构 下面是store文件夹下的state.js和index.js内容 //state.jsconst state =...

peakedness丶
51分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部