<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
.triangle-left {
width:0;
height:0;
border-right:20px solid yellow;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
}

.triangle-up {
width:0;
height:0;
border-bottom:20px solid yellow;
border-left:20px solid transparent;
border-right:20px solid transparent;
}
.triangle-right {
width:0;
height:0;
border-left:20px solid yellow;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
}
.triangle-down {
width:0;
height:0;
border-top:20px solid yellow;
border-left:20px solid transparent;
border-right:20px solid transparent;
}
</style>
</head>

<body>
<div class="triangle-left"></div>
<div class="triangle-up"></div>
<div class="triangle-right"></div>
<div class="triangle-down"></div>
</body>
</html>

转载自：https://www.cnblogs.com/ll-taj/p/5222412.html

用css3写出的倒三角形的更多相关文章

  1. css3写出飘雪花特效

    大冬天的,飘雪花的特效,你可能要用上了吧.通常情况下用jQuery写飘雪花的特效,但用css3写,其实特别简单,新手一看就懂,那就告别jQuery,用css3轻松搞定飘雪花特效吧! 点击查看特效演示 ...

  2. css3写出0.5px的边框

    一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代 ...

  3. 利用css3特性写出三角形（兼容IE浏览器）

    利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...

  4. 使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...

  5. 一些纯css3写的公司logo

      随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些复杂的动画,能替代很多以前js才能完成的工作,css3的作用还不止于此 ...

  6. 纯HTML+CSS写出一颗会飘动的树，有没有惊艳到你呢？

    前言 使用HTML+CSS能写出什么惊人的效果呢? 针对这个问题,我总会看到类似的回答,比如没有JS,前端永远都是静态的:HTML5要搭配JS,要不然一文不值. JS固然强大,但CSS也并非一文不值, ...

  7. 前端一面/面试常考题1-页面布局：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px,中间自适应。

    题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. [题外话:日常宣读我的目标===想要成为一名优雅的程序媛] 一.分析 1. 题目真的像我们想得这么简单吗? 其实不然 ...

  8. 所有用CSS3写的3D特效，都离不开这些知识

    起因 昨晚在做慕课网的十天精通CSS3课程,其中的综合练习是要做一个3D导航翻转的效果.非常高大上. 以往这些效果我都很不屑,觉得网上一大堆这些特效的代码,复制粘贴就好了,够快.但是现实工作中,其实自 ...

  9. 写出易调试的SQL(修订版)

    h4 { background: #698B22 !important; color: #FFFFFF; font-family: "微软雅黑", "宋体", ...

随机推荐

  1. CodeChef Count Substrings

    Count Substrings   Problem code: CSUB   Submit All Submissions   All submissions for this problem ar ...

  2. azkaban简单使用

    步骤 1.通过web服务器创建项目,项目名称和描述都是必须填的2.上传zip包 job定义 1.简单的job一个job就是一个properties文件,只不过文件是以.job结尾,文件里面定义了job ...

  3. ES6——函数-参数

    函数的参数: 1.参数扩展/数组展开      1)收集(剩余的)参数          function show(a,b,...args){}   // 三点运算符           *Rest ...

  4. 关于linux的日志

    日志的三种类型# 内核及系统日志: 这种日志数据由系统服务rsyslog统一管理,根据其主配置文件/etc/rsyslog.conf中的设置决定将内核消息及各种系统程序消息记录到什么位置.系统中有相当 ...

  5. CentOS7.6系统安装zabbix3.4.8客户端

    一.     准备安装包 将本地的zabbix-3.4.8软件包上传至服务器, 二.     安装依赖包 安装依赖包:yum install gcc* pcre* psmisc -y 三.     安 ...

  6. nginx部署静态资源

    第一步.推荐使用EditPlus中ftp工具 安装,然后点击File->FTP->FTPUPLOAD->Settings->add.然后进行配置: 这样只是为了方便编辑Linu ...

  7. 使用eclipse创建Spring Boot项目

    环境介绍 1.jdk1.8 2.eclipse 3.maven 3.5.0 创建项目 eclectic 左上角 file -> new -> maven project 出现下图默认就好, ...

  8. Gradle构建SpringBoot并打包可运行的jar配置

    使用Gradle构建项目,继承了Ant的灵活和Maven的生命周期管理,不再使用XML作为配置文件格式,采用了DSL格式,使得脚本更加简洁. 构建环境: jdk1.6以上,此处使用1.8 Gradle ...

  9. 六、实现一个小功能 todolist

    1.创建一个新的Compnent 如果是通过 cli 创建的会自动加入,如果是手动创建的,需要自己加入. 2.实现添加效果 3.实现删除按钮 4.优化,把点击 添加 改为 回车 添加 5.优化,分成“ ...

  10. RequestMappingHandlerMapping详解

    我们先理简单梳理一个关系 关系梳理 spring ioc 是spring的核心,用来管理spring bean的生命周期 MVC 是一种使用 MVC(Model View Controller 模型- ...