css+html实现倒三角

倒三角的做法其实很简单，一个长宽都为0的框，它的四边其实是四个三角形。它有4条边，从左至右分别为left 、 top 、 right 、 bottom，设置宽高为0，border:50px，然后分别设置每条边的颜色，即可得到下面的四边形。然后设置 left 、right 、bottom的背景色为透明（transparent），即可得到漂亮的倒三角形。

效果图如下：

代码实现：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.container {width: 500px;margin: 100px auto;}.triangle {width: 0px;height: 0px;border-left: 50px solid red;border-right: 50px solid blue;border-top: 50px solid yellow;border-bottom: 50px solid green;}.corner {width: 0px;                 /*  宽高设置为0，很重要，否则达不到效果 */height: 0px;border: 50px solid yellow;border-bottom-color: transparent;    /* 设置透明背景色 */border-left-color: transparent;border-right-color: transparent;}</style></head><body><div class="container"><div class="triangle">四边形</div></div><div class="container"><div class="corner">倒三角</div></div></body>
</html>

css+html实现倒三角相关推荐

css 倒三角_倒三角结构：如何管理大型CSS项目
css 倒三角 by Luuk Gruijs Luuk Gruijs着倒三角结构:如何管理大型CSS项目 (The Inverted Triangle Architecture: how to ma ...
css 倒三角_【译】改善 CSS 的 10 个最佳实践
CSS 看起来是一种非常直接且不易犯错的语言.只需要添加规则以对网站进行样式设置就可以了,对吗?对于只需要几个 CSS 文件的小型站点,可能是这种情况.但是在大型程序中,这样可能会使样式迅速失控.如何 ...
css 倒三角_改善CSS的10种最佳做法
CSS似乎是一种非常简单的语言,很难在其中犯错误.你只需添加样式规则,就可以对网站进行样式设置了,对吗?对于只需要几个CSS文件的小型网站,情况可能就是这样.但是在大型应用程序中,样式可能会迅速失控. ...
css 倒三角_【推荐收藏】10 个最佳实践来改良你的 CSS
前言 ❝ 正文从这里开始- 1. 你真的需要框架吗? 首先,决定是否真的需要使用 CSS 框架.现在,有许多替代轻量级健壮(robust)框架的方法.通常,你不需要使用框架中的所有选择器,所以你的包中 ...
css 倒三角_改善CSS的10种最佳做法，帮助你从样式中获得最大的收益。
翻译:英文 | https://medium.com/better-programming/10-best-practices-for-improving-your-css-84c69aac66e C ...
css倒三角的几种实现方式
1.BASE64编码图片假如你已经有了三角形的图片,并且减少HTTP请求,那么将这个图片转换成一个BASE64字符串是最好的解决方案. 有用的工具 http://webcodertools.com ...
HTML+CSS实现倒三角符号
在网页设计中通常需要实现倒三角符号的效果,比如下图当当网的搜索框: 那么,我们做出的最终效果是这样的: <!DOCTYPE html> <html> <head>& ...
python打印乘法表口诀-用Python打印九九乘法表正三角和倒三角。
网上看到一道作业,用Python打印九九乘法表正三角和倒三角. 正三角输出: for i in range(1,10): for j in range(1,i+1): if(i==j): print( ...
php怎么输出倒三角_JS数组中，两两比较的算法，为了获取重复的值，并在php数组中，使用这种倒三角算法...
紧接上一篇,数组内部两两比较 1.php数组的两两比较,暂时没思路,所以看了一些js的两两比较 2.js的两两比较的原理 //来源 https://blog.csdn.net/tatagg/artic ...

css+html实现倒三角

css+html实现倒三角相关推荐

最新文章

热门文章