css倒三角的几种实现方式

1.BASE64编码图片

假如你已经有了三角形的图片，并且减少HTTP请求，那么将这个图片转换成一个BASE64字符串是最好的解决方案。

有用的工具

http://webcodertools.com/imagetobase64converter

http://image2base64.wemakesites.net/

优点
你可以按照自己的思想设计阴影，渐变等，然后对其进行转换编码
缺点
你需要使用一个图片编辑软件去设计
对于较大的图片，最终转换成字符串占用大小会很大
旧版本的浏览器，如：IE6/IE7是不兼容的
2.CSS 边框

<html>
<title>倒三角演示代码1</title>
<head><style type="text/css">.triangleDiv{border-color: #57af1a #fff #fff #fff;border-style: solid;border-width: 100px 60px 0 60px;height: 0;width: 0;}</style>
</head>
<body>
<div class='triangleDiv'></div>
</body>
</html>

优点
很容易的通过修改一些CSS代码属性值而更改颜色和大小
这是一个跨浏览器的解决方案。
缺点
这个方式使用的是border,所以你不能添加阴影、渐变、和其他一些CSS3效果
请记住，IE6是不支持透明边界的-如果你关心这个问题
如果你使用火狐浏览器，要知道，CSS的“透明”有时可能不会是透明的
3.Unicode字符

<html>
<title>倒三角演示代码2</title>
<head><style type="text/css">.triangleDiv{font-size: 18px;color: #f7931d;text-shadow: 0 1px 1px rgb(99, 95, 92);}</style>
</head>
<body>
<span class='triangleDiv'>▼</span>
</body>
</html>

优点
它是一个跨浏览器的技术
您可以使用CSS3的text-shadow属性添加阴影。
缺点
不能使用太多的CSS3效果，除了使用文字阴影。
在所有的浏览器，这是相当不可能实现像素完美。
4.CSS 旋转正方形

<html>
<title>倒三角演示代码3</title>
<head><style type="text/css">.parentDiv {height: 14px;overflow: hidden;}.triangleDiv {position: relative;height: 20px;width: 12px;top: -12px;left: 7px;background: #0c0c0c;-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}</style>
</head>
<body>
<div class="parentDiv"><div class="triangleDiv"></div>
</div>
</body>
</html>

优点
CSS3阴影，渐变等可以更多的使用
缺点
这个解决方案不是跨浏览器的,首先是因为CSS3旋转。

css倒三角的几种实现方式相关推荐

html空心三角形这么编码,css空心三角的三种实现方式
在做如算上处定面一这我作问汇u应色会进灯样近页面的时候经常会用到空心三角,这里总结一下我所知道的空心三角的三种功一新说讲为其年次供.发了架人据模制理个通似会业文告个了者到作会也转动和矿大一效实现方法. ...
css 倒三角_倒三角结构：如何管理大型CSS项目
css 倒三角 by Luuk Gruijs Luuk Gruijs着倒三角结构:如何管理大型CSS项目 (The Inverted Triangle Architecture: how to ma ...
html 水平垂直居中,css水平垂直居中有几种实现方式？
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
[css] 说下line-height三种赋值方式有何区别？
[css] 说下line-height三种赋值方式有何区别? line-height 可以有带单位及不带单位的写法(感觉其实是两种).div{line-height: 24px;line-height ...
css 倒三角_改善CSS的10种最佳做法
CSS似乎是一种非常简单的语言,很难在其中犯错误.你只需添加样式规则,就可以对网站进行样式设置了,对吗?对于只需要几个CSS文件的小型网站,情况可能就是这样.但是在大型应用程序中,样式可能会迅速失控. ...
css 倒三角_改善CSS的10种最佳做法，帮助你从样式中获得最大的收益。
翻译:英文 | https://medium.com/better-programming/10-best-practices-for-improving-your-css-84c69aac66e C ...
css 倒三角_【译】改善 CSS 的 10 个最佳实践
CSS 看起来是一种非常直接且不易犯错的语言.只需要添加规则以对网站进行样式设置就可以了,对吗?对于只需要几个 CSS 文件的小型站点,可能是这种情况.但是在大型程序中,这样可能会使样式迅速失控.如何 ...
css 倒三角_【推荐收藏】10 个最佳实践来改良你的 CSS
前言 ❝ 正文从这里开始- 1. 你真的需要框架吗? 首先,决定是否真的需要使用 CSS 框架.现在,有许多替代轻量级健壮(robust)框架的方法.通常,你不需要使用框架中的所有选择器,所以你的包中 ...
简述css属性选择器的几种定义方式_CSS基础试题
一.单选题 1.CSS是利用( B )XHTML标签构建网页布局. A. C. D. 2.在CSS语言中下列哪一项是"左边框"的语法( C ) A.borde ...

css倒三角的几种实现方式

css倒三角的几种实现方式相关推荐

最新文章

热门文章