文档章节

CSS3 制作三角形

施长成
 施长成
发布于 2015/04/12 11:43
字数 434
阅读 11
收藏 0
点赞 0
评论 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
博文 63
码字总数 22544
作品 0
崇明
后端工程师
使用CSS3打造的精美特效盘点,部分有中文制作教程及源码

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

tp_wire ⋅ 2012/04/16 ⋅ 0

制作CSS气泡框

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

阮一峰 ⋅ 2010/04/03 ⋅ 0

WEB前端学习面试:CSS绘制平行四边形

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

web前端小辰 ⋅ 05/13 ⋅ 0

令人难以置信的纯 CSS3 图标

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

古欣 ⋅ 2010/09/13 ⋅ 6

16 个新鲜的 CSS3 在线教程

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

红薯 ⋅ 2012/04/29 ⋅ 4

10个不错的CSS3表单教程

注:本文由敏捷翻译- 宋彩珺翻译自Jean-Baptiste Jung的博文。如需转载,请参照文章末尾处的声明。 CSS3的出现,为制作更好的网页表单带来无数新的可能。在本文中,我收集了10种运用新技术C...

随影求是 ⋅ 2012/03/15 ⋅ 0

border属性的多方位应用和实现自适应三角形

属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标...

深海鱼在掘金 ⋅ 2017/11/23 ⋅ 0

21 个新鲜的 CSS 3 教程与技巧

CSS3 已经变得很流行。大部分的浏览器比如IE7、IE8、Safari、Firefox和Chrome,都支持新的CSS3属性。CSS3有非常多的web和移动方面的功能。 本文列出21个新鲜的CSS3教程和技巧,供大家学习、交...

老枪 ⋅ 2011/05/25 ⋅ 5

WEB前端学习面试:用CSS画一个等边三角形

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

web前端小辰 ⋅ 05/30 ⋅ 0

几何画板应该这么用

在学习数学时,发现现在的数学题目,很多图形没有办法动起来,无法让学生直观地看到图形的变化,仅凭借学生的一点想象力,很容易理解错误,把题目做错。其实不管你是老师还是学生,都不要灰心...

学术研究软件 ⋅ 2016/10/12 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部