文档章节

用 CSS 实现三角形

ali安东尼
 ali安东尼
发布于 2017/09/08 15:12
字数 310
阅读 4
收藏 0
点赞 0
评论 0

1. 利用 border 属性实现三角形       怎么border能实现三角形呢?是不是很神奇?别着急,先来看看一个梯形:          

        .triangle{             width:30px;             height:30px;             border-width:20px;             border-style:solid;             border-color:#e66161 #f3bb5b #94e24f #85bfda;         }

     如果***width跟height都设置为0***,会出现什么样的效果呢?

    哈哈,结果就是四个梯形都变成了三角形了。          

    可是只想要其中一个三角形,这怎么办?很简单,只要***把不需要的边框颜色都设成透明或和背景颜色相同的颜色***,比如说要上面红色的三角形,那么可以设置样式如下:

        .triangle{             width:0;             height:0;             border-width:20px;             border-style:solid dashed dashed dashed;             border-color:#e66161 transparent transparent transparent;         }

    结果就是这样子了:

    

推荐:

1. 用css可是实现三角形,但是借用bookstrap可以更简单地实现,比如:

    <span class="caret"></span>

    其原理是借助上述的borde属性来控制的

    可以看看这篇文章的介绍:http://blog.sina.com.cn/s/blog_6c2c68a60102wigz.html

2. 使用font-some字体图标也能实现三角形,首先先引入font-some的样式文件

    <link href="css/font-awesome.css" rel="stylesheet" />

    html:

        <i class="fa fa-sort-desc"></i>         <i class="fa fa-sort-up"></i>    

本文参考:http://www.feelcss.com/three-pure-css-to-achieve-the-triangle-method.html

由睿江云人员提供,想了解更多,请登陆www.eflycloud.com

© 著作权归作者所有

共有 人打赏支持
ali安东尼
粉丝 3
博文 192
码字总数 173101
作品 0
广州
css实现toolTip

title 1,常用border来实现三角形 原理: 宽高都不设置(即为0),只设置边框,如果4个边框都设置宽度(border-width),样式(border-style)和颜色(border-color) 效果如图 上面看到的都是三角形,其实...

funnycoderstar ⋅ 2017/09/27 ⋅ 0

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

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

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

【基础】在css中绘制三角形及相关应用

简言 本文简要阐述了用CSS边框的方法在页面上绘制三角形,包括几种典型的三角形绘制,还介绍了几个简单的应用场景。利用边框绘制三角形方法只是众多方案中的一种,大家根据项目实际,选用最适...

毛三十 ⋅ 04/14 ⋅ 0

css实现三角形

工作中经常遇到一些tip提示,tip提示会有一个小三角形,我们可以使用图片或者iconfont实现,当然最高级的还是用css实现。下面就简单总结一下如何使用css的border属性来绘制小三角。 假设我们...

tiancai啊呆 ⋅ 01/10 ⋅ 0

令人难以置信的纯 CSS3 图标

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

古欣 ⋅ 2010/09/13 ⋅ 6

三角形的 N 种画法与浏览器的开放世界

最近,我完全沉迷在了任天堂 Switch 上的《塞尔达传说:荒野之息》里,以至于专栏都快要停更了(罪过罪过)。大概每个塞尔达玩家都会有这个疑问,那就是 这个游戏为什么这么好玩?! 非常有意...

doodlewind ⋅ 05/02 ⋅ 0

【CSS】格子背景

image.png CSS代码 主要通过 background-image 的渐变来实现这种效果。 用2个三角形合并成一个正方形。 详解 首先设置background为#fff,让背景色变成纯白色(也可以设置成别的颜色)。 做一...

KelvinZ ⋅ 2017/12/19 ⋅ 0

基于单个 div 的 CSS 绘图

原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 绘图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺术的结合!赞作者的这句话:Restricting your availabl...

justjavac ⋅ 2014/10/11 ⋅ 1

css绘制三角形

今天看到人家用css画了一个三角形,简简单单几行代码,惊讶css还有很多我们不知道的东西. 三角形实际还是可以用在很多地方的.其实就那么几行代码直接贴上: div.arrow-up { width: 0; height: ...

L3ve ⋅ 2014/08/13 ⋅ 0

css实现三角形及应用示例

css实现三角形,网上讲了很多,但我发现一般都是三角向上或者向下的,向左向右这两方向似乎讲得很少,本人试了一下,发现原来在IE下很难搞~~(万恶的IE)... css实现三角形的原理是:当元素的宽...

i33 ⋅ 2012/12/06 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Hive函数

1.函数explode (一转多) create table hive_wc(sentence string); load data local inpath '/home/hadoop/data/hive-wc.txt' into table hive_wc; 结果: hive > select * from hive_wc; ......

GordonNemo ⋅ 27分钟前 ⋅ 0

PE格式第三讲扩展,VA,RVA,FA的概念

作者:IBinary 出处:http://www.cnblogs.com/iBinary/ 版权所有,欢迎保留原文链接进行转载:) 一丶VA概念 VA (virtual Address) 虚拟地址的意思 ,比如随便打开一个PE,找下它的虚拟地址 这边...

simpower ⋅ 45分钟前 ⋅ 0

使用Java connector消费ABAP系统的函数

Java Connector(JCO)环境的搭建:Step by step to download and configure JCO in your laptop 我的ABAP系统有个函数名叫ZDIS_GET_UPSELL_MATERIALS,输入一个customer ID和product ID,会输......

JerryWang_SAP ⋅ 50分钟前 ⋅ 0

IDEA提示编码速度

焦点移动 将焦点冲代码编辑窗口移动到菜单栏:Alt+菜单栏带下划线字母 将焦点从工具窗口移动到代码编辑窗口 Esc或Shift+Esc 将焦点从代码编辑移动到最近使用的工具窗口 F12 模板提示 Ctrl+J...

bithup ⋅ 今天 ⋅ 0

180623-SpringBoot之logback配置文件

SpringBoot配置logback 项目的日志配置属于比较常见的case了,之前接触和使用的都是Spring结合xml的方式,引入几个依赖,然后写个 logback.xml 配置文件即可,那么在SpringBoot中可以怎么做?...

小灰灰Blog ⋅ 今天 ⋅ 0

冒泡排序

原理:比较两个相邻的元素,将值大的元素交换至右端。 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面。即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后。然后比较第...

人觉非常君 ⋅ 今天 ⋅ 0

Vagrant setup

安装软件 brew cask install virtualboxbrew cask install vagrant 创建project mkdir -p mst/vmcd mst/vmvagrant init hashicorp/precise64vagrant up hashicorp/precise64是一个box......

遥借东风 ⋅ 今天 ⋅ 0

python3.6 安装pyhook_3

我的是在win下的,忙了半天老是安装不了, pip install 也不行。 那么可以看出自己的版本是32bit 一脸懵逼 没办法 只好下载32版本的来安装 我一直以为 是 对应32 位的 。 下面是 小例子 http...

之渊 ⋅ 今天 ⋅ 0

004、location正则表达式

1、location的作用 location指令的作用是根据用户请求的URI来执行不同的应用,也就是根据用户请求的网站URL进行匹配,匹配成功即进行相关的操作。 2、location的语法 = 开头表示精确匹配 ^~...

北岩 ⋅ 今天 ⋅ 0

CentOS7 静默安装 Oracle 12c

环境 CentOS7.5 最小安装 数据库软件 linuxx64_12201_database.zip 操作系统配置 关闭 SELinux sed -i '/^SELINUX=/cSELINUX=disabled' /etc/selinux/config 关闭防火墙 systemctl disable ......

Colben ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部