<!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伪类三角形的更多相关文章

  1. div css 伪类 不固定图片大小 居中， css div 实现三角形

    div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...

  2. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  3. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  4. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  5. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  6. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  7. CSS 伪类

    Link The :link CSS pseudo-class lets you select links inside elements. This will select any link whi ...

  8. CSS伪类

    CSS伪类:控制元素的某种状态 语法:元素名称:伪类名称{属性:值} CSS伪类控制链接状态 状态 语法 未访问的链接 a:link{color:#ff00ff} 已访问的链接 a:visited{c ...

  9. 应用越来越广泛的css伪类

    说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...

  10. (五)CSS伪类(Pseudo-class)

    CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...

随机推荐

  1. java GUI AWT包

    第一个GUI程序,在netbeans里因为没有自动导包,害的我差点崩溃,因为没有导入AWT包,所以 public class Jfram { /** * @param args the command ...

  2. 最长上升子序列（LIS） dp典型例题（tzoj 矩形嵌套，Rectangles ）

    5985: 矩形嵌套 题意:求最长递增子序列(包含两个元素) 思路:先找出关系式子: li=lj+1(当ai<aj时) 两层循环 第一层i从1-n 第二层j 从0-i :求出i前面的每个j 的m ...

  3. charles3.11.1抓https包

    结论先行: 用的是安卓测试机,没加固之前的生产环境的安装包,可以抓到https请求 加固之后的包[也就是要上应用市场的包],抓不到https请求 电脑上的操作: 1. 安装证书[电脑上安装了charl ...

  4. Error running 'tm8': Cannot load C:\Users\Administrator\.IntelliJIdea2019.3\system\tomcat\Unnamed_jymes_3\conf\server.xml (系统找不到指定的文件。)

    救命救命,由于脑壳被门夹了去更改了idea的配置,导致重启项目报错!又是给自己挖坑的一天,唉!!! 主要是看报错信息还一直以为是tomcat的问题,然后试了很多方法,比如查看配置的tomcat路径.重 ...

  5. SaaS、PaaS、IaaS的区别

    我们从SaaS.PaaS.IaaS的定义.工业应用以及具体案例几方面来介绍他们之间的区别 一.定义层面的区别 SaaS.PaaS.IaaS简单的说都属于云计算服务,也就是云计算+服务. 我们对于云计算 ...

  6. 20201003--统计数字字符个数（奥赛一本通 P98 1--字符类型和字符数组）

    输入一行字符,统计出其中数字字符的个数 输入:一行字符串,总长度不超过255 输出:一行,输出字符串里面数字字符的个数. 样例输入:Peking University is set up at 189 ...

  7. Vue的学习(1)

    在学习Vue之前,首先大家要知道一个mvvm模式,何为mvvm模式呢,mvvm其实是有m,v和vm组成,类似与java里面的mvc模式,只不过mvc模式是针对于后台来说,而mvvm是针对于前台来说的, ...

  8. k8s集群查看node和pod的实时资源使用情况

    一.部署步骤 1.准备metrics-server官方yaml文件 2.部署metrics-server 3.查看资源使用情况 二.准备metrics-server官方yaml文件 [root@loc ...

  9. reactHooks_useEffect

    当在直接在组件内使用setState时,会产生"渲染次数过多"的错误 例如: const A = ( ) => {   const [num,setNum] = useSta ...

  10. ByteArrayInputStream和ByteArrayOutputStream不需要关闭流的原理--博客摘录

    ---------------- 版权声明:本文为CSDN博主「PSUUGDUFNM」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明.原文链接:https://blo ...