CSS伪类三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-三角形</title>
<style>
.triangle {
width: 0;
height: 0;
border: 100px solid;
border-color: orangered skyblue gold yellowgreen;
}
</style>
</head>
<body>
<div class="triangle">
</div>
</body>
</html>
结果如下如图所示：
如果想要一个下的三角形，可以让border的上边框可见，其他边框颜色都设置为透明
.down-triangle {
width: 0;
height: 0;
border-top: 50px solid orangered;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
结果如下如图所示：
如果想要一个上的三角形，可以让border的下边框可见，其他边框颜色都设置为透明
.top-triangle {
width: 0;
height: 0;
border-bottom: 50px solid gold;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
结果如下如图所示：
如果想要一个左的三角形，可以让border的右边框可见，其他边框颜色都设置为透明
.left-triangle {
width: 0;
height: 0;
border-right: 50px solid skyblue;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
结果如下如图所示：
如果想要一个右的三角形，可以让border的左边框可见，其他边框颜色都设置为透明
.right-triangle {
width: 0;
height: 0;
border-left: 50px solid yellowgreen;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
结果如下如图所示：
.triangle { width: 0; height: 0; border-top: 100px solid rgba(255, 69, 0, 1); border-right: 100px solid rgba(135, 206, 235, 1); border-bottom: 100px solid rgba(255, 215, 0, 1); border-left: 100px solid rgba(154, 205, 50, 1) }
CSS伪类三角形的更多相关文章
- div css 伪类 不固定图片大小 居中， css div 实现三角形
div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...
- js动态改变css伪类样式
首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- CSS伪类与CSS伪元素的区别及由来
关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...
- CSS 伪类
Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...
- CSS伪类
CSS伪类:控制元素的某种状态 语法:元素名称:伪类名称{属性:值} CSS伪类控制链接状态 状态 语法 未访问的链接 a:link{color:#ff00ff} 已访问的链接 a:visited{c ...
- 应用越来越广泛的css伪类
说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...
- (五)CSS伪类(Pseudo-class)
CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...
随机推荐
- AWS ssm 连接实例
aws ssm连接:aws ssm start-session \ --profile xxRole \ --region cn-northwest-1 \ --target i-08d6874428 ...
- 逆向学习物联网-网关ESP8266-03软件编程实现
1.技术原理及流程 1) MQTT数据通讯原理 2).网关协议运行状态机 3). 主程序流程 2.关键程序代码实现 MDK集成开发环境的搭建,大家可以百度搜索,或者参考感知层的软件设计部分. 1) ...
- [iOS] 对 UItableView 等界面(ClipsToBounds) 同时使用 圆角和阴影
展示内容的界面会被 ClipsToBounds = YES(按边缘剪切),但同时需要圆角和阴影效果. 一个界面,ClipsToBounds = YES 之后,阴影会被剪切,不再展示. 感觉只能使用多个 ...
- php中self和$this还有parent的区别
1.self代表类,$this代表对象 2.能用$this的地方一定使用self,能用self的地方不一定能用$this 3.parent只能调用静态属性,并且可以调用父类中公有和受保护的方法 静态的 ...
- 20202411 2020-2021-2 《Python程序设计》实验二报告
20202411 2020-2021-2 <Python程序设计>实验二报告 课程:<Python程序设计> 班级: 2024 姓名: 陈书桓 学号:20202411 实验教师 ...
- Win32游戏开发程序——第一个“游戏”程序
在中国大学慕课上面看到的一道题目,算得上是入门吧. 题目如下: 在"HelloWorldGame"游戏代码的基础上,试着进行如下的上机练习(能实现至少一个即可): • 将文字修改 ...
- 第08组Beta冲刺（3/4）
队名 八组评分了吗 组长博客链接(2分) 组员1李昕晖(组长) 过去两天完成了哪些任务 文字/口头描述 了解各个小组的进度与难以攻破的地方,晚上安排开会,安排新的冲刺任务. 重新分配小组及个人任务. ...
- 随机生成不重复的几个数（Unity）
using System.Collections.Generic; using UnityEngine; /// <summary> /// 随机数管理类 /// </summary ...
- 2022/7/28 第七组陈美娜 API类
API:Application Program Interface应用程序接口 JDK给我们提供的一些已经写好的类,可以直接调方法来解决问题 类的方法在宏观上都可以称为接口 接口:1.interfac ...
- SQL Server 还原数据库
1.备份要还原的数据库 选择要备份的数据库,右键单击,任务--备份. 2.备份完成后,将数据库还原 3.新建一个空的数据库,比如Gsy_TestNew,将备份的数据库还原到这个新的库上 4.右键单击[ ...