html 倒三角制作,css倒三角制作，css倒三角的原理

前段时间，有人问下面这个图的效果，怎么用css做出来，不用CSS3，兼容到IE7：

我起初也一头雾水，后来看到一个类似的案例，才恍然大悟。我们都知道，css的每条边相交的地方，都是三角，如果，将容器的宽高，设置为0，而边框非常粗，并且每条边颜色不同，就会得到下面的效果：

css代码：

.test{

width:0px;

height:0px;

border:100px solid red;

border-top-color:red;

border-bottom-color:blue;

border-right-color:orange;

border-left-color:black;

}

html代码：

如果将其中三条边的透明度设置为0，即，将上面的代码的三条边改成：

border-bottom-color:transparent;

border-left-color:transparent;

border-right-color:transparent;

那么就会得到下面的效果：

三角形已经出来了，那么想实现一开始的效果，就简单了，即再做一个比这个边框细一点的三角形，边框颜色为白色，盖在这个倒三角的上面，就能实现了，而且，兼容性非常好，效果图：

作者：舒小羽

链接：https://www.jianshu.com/p/d76ab0d19f0c

html 倒三角制作,css倒三角制作，css倒三角的原理相关推荐

css 倒三角_倒三角结构：如何管理大型CSS项目
css 倒三角 by Luuk Gruijs Luuk Gruijs着倒三角结构:如何管理大型CSS项目 (The Inverted Triangle Architecture: how to ma ...
输出倒三角图案:在屏幕上显示如下倒三角图案
输出倒三角图案:在屏幕上显示如下倒三角图案 /*输出倒三角图案:在屏幕上显示如下倒三角图案. * * * * * * * * * * 试编写相应程序.*/ ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
巧用CSS background-image属性制作图形背景
先看一张广告图,这是我们平时在浏览网页的时候,经常见到的一种文字广告设计,在文字周围绕着白色线条,我想大多数设计师可能就直接在ps中画一个png图片,再用css background-image 背景 ...
网页制作中规范使用DIV+CSS命名规则（转）
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则内容如下: 页头:header 如:#header{属性:属性值;}或.h ...
响应式布局html像素值计算,CSS Calc()：制作响应式网格布局的锋利武器
响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...
PHP全栈开发（八）：CSS Ⅹ 导航栏制作
学习了这么久的CSS,我们现在也可以小试牛刀一下了,我们使用我们学会的CSS知识来制作一个导航栏. 我们都知道,在现代的导航栏里面,最普遍的就是使用无序列表来制作导航栏. 我们可以使用如下代码来制作一 ...
张洪斌 html css,网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc...
网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100008_设计文档课件.doc <课程案例 --案例图3-1 网站div结构布局示意图 3.2界 ...
css中border制作各种形状
css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...
用CSS伪类制作一个不断旋转的八卦图？
前言介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图代码如下: HTML部分 <!DOCTYPE html> <html> <head>& ...

html 倒三角制作,css倒三角制作，css倒三角的原理

html 倒三角制作,css倒三角制作，css倒三角的原理相关推荐

最新文章

热门文章