CSS学习笔记(8)--纯CSS绘制三角形(各种角度)
纯CSS绘制三角形(各种角度)
今天给大家带来 CSS 三角形绘制方法
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
CSS学习笔记(8)--纯CSS绘制三角形(各种角度)的更多相关文章
- CSS学习笔记:利用border绘制三角形
在前端的笔试.面试过程中,经常会出现一些不规则图形的CSS设置,基本上多是矩形外加一个三角形.利用CSS属性可以实现三角形的生成,主要利用上下左右的边距的折叠. 1.第一种图形: .box { wid ...
- CSS学习笔记一:css 画平面图形
最近在学习CSS,先从CSS画点平面图形入手,发现除了正方形.长方形此类比较简单,只要有长宽设置恰当即可,画圆要涉及radius,然后恢复到做界面的最讨厌的状态了,不断的修改设值,调整数据,所幸并不多 ...
- CSS学习笔记二:css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- 【CSS学习笔记】初始化CSS后,写li,并利用背景图片,来完成li小图标的效果,且达到个浏览器兼容
第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里. 在<li>中设置背景图片的尺寸,地址,不重复, ...
- CSS学习笔记之基本介绍
1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...
- 2022-07-10 第五小组 pan小堂 css学习笔记
css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
随机推荐
- 84. Largest Rectangle in Histogram-hard
84. Largest Rectangle in Histogram 题目 Given n non-negative integers representing the histogram's bar ...
- Java Drp项目实战—— 环境搭建
概要 我们要開始一个关于Java项目的开发,那么我们就须要搭建一个关于Java开发的环境,那么搭建一个Java开发环境,都须要些什么东东,又有些什么注意事项呢. 过程 我先将我搭建Java环境的软件和 ...
- 【笔记】让360浏览器用chrome 内核渲染你的网页
学校的项目还处在测试阶段 有一个痛点就是有一些页面在360浏览器中默认以ie 内核渲染 这样很不好 以为部分页面因技术方面的不足导致并不能很好地兼容ie 浏览器,于是在网上找了一下答案 可真还有解决方 ...
- angularjs中的$state.go
路由是这么定义的: $stateProvider .state('page1', { url: '/page1', templateUrl: 'views/page1.htm', controller ...
- 流编辑器sed
sed与grep一样,都起源于老式的ed编辑器,因其是一个流编辑器(stream editor)而得名.与vi等编辑器不同,sed是一种非交互式编辑器(即用户不必参与编辑过程),它使用预先设定好的编辑 ...
- Unity3d中使用log4net
原地址:http://www.cnblogs.com/koalaylj/archive/2012/09/04/2670629.html 最近在用unity3d开发Android上的游戏,一直Debug ...
- Event sender
Sometimes it is convenient to know which widget is the sender of a signal. For this, PyQt4 has these ...
- scribe 搭建遇到的问题
1.如果安装了多个boost版本或boost路径不是scribe脚本指定的话,会出现问题: checking whether the Boost::System library is availabl ...
- Node.js 使用JWT进行用户认证
代码地址如下:http://www.demodashi.com/demo/13847.html 运行环境 该项目基于 node(v7.8.0版本以上) 和 mongodb 数据库,因此电脑上需要安装这 ...
- nyoj847 S + T(贪心)
题目847 题目信息 执行结果 本题排行 讨论区 S + T 时间限制:1000 ms | 内存限制:65535 KB 难度: 描写叙述 给你一个长度为n的整数序列A1.A2,--,An,找出两个 ...