文档章节

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
WEB前端学习面试:CSS绘制平行四边形

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

web前端小辰
05/13
0
0
令人难以置信的纯 CSS3 图标

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

古欣
2010/09/13
1K
6
border属性的多方位应用和实现自适应三角形

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

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0
SpringBoot2.0 停机

最近新建了个SpringBoot2.0的项目,因为原来一直使用的是传统的Tomcat部署war包的形式,所以这次SpringBoot内置Tomcat部署jar包的时候遇到了很多问题。其中一个就是因为没有外置的Tomcat容器...

Canaan_
昨天
0
1
Confluence 6 外部参考

一个外部参考的意思是任何站点链接到你 Confluence 的实例。任何时候当 Confluence 的用户单击这个外部链接的时候,Confluence 可以记录这次单击为参考。 在默认的情况下,外部链接的参考链接...

honeymose
昨天
0
0
Android中的设计模式之抽象工厂模式

参考 《设计模式解析》 第十一章 Abstract Factory模式 《设计模式:可复用面向对象软件的基础 》3.1 Abstract Factory 抽象工厂 对象创建型模式 《Android源码设计模式解析与实战》第6章 创...

newtrek
昨天
0
0
Redis | 地理空间(GEO)的一个坑

Redis的地理空间(Geo)是个好东西,轻轻松松的就可以把地图描点的问题处理了, 最近却遇到一个坑...Redis采用的Msater-Slave模式, 运用GEORADIUS在salve读取对应的数据,新增了从节点但是从不返...

云迹
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部