<!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. BZOJ 3703: 昊昊的壮举之造福社会

    传送门 搜索,剪枝 首先可以二分答案迭代加深,假设要买 $p$ 台 那么肯定卖价格最小的 $p$ 台 再来个 $A*$ ,设搜到当前情况时,有 $waste$ 的钱一定要被浪费(其实就是某些学校剩下的 ...

  2. Hibernate4教程二：基本配置（2）

    <hibernate-mapping>元素 这个元素是xxx.hbm.xml配置的根元素,定义如下: java代码: <hibernate-mapping schema=" ...

  3. 从“中产梦”中醒来，好好打工吧

    "中产"定义 自打"中产阶级/阶层"概念出现,总有人试图给出定义.搞不清何为"中产"却试图定义"中产阶级/阶层",注定是 ...

  4. JavaScript给动态插入的元素添加事件绑定

    由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中 插入内容,有两种方法, 一种是在写HTML代码写入JS,然后 ...

  5. ubuntu vim8.1编译安装

    sudo apt-get install libncurses5-dev python-dev python3-dev libgtk-3-dev libatk1.0-dev libbonoboui2- ...

  6. Git--01 基础 - 远程仓库的使用

    目录 Git 基础 - 远程仓库的使用 远程仓库的使用 查看远程仓库 添加远程仓库 从远程仓库中抓取与拉取 推送到远程仓库 查看某个远程仓库 远程仓库的移除与重命名 Git 基础 - 远程仓库的使用 ...

  7. linux学习-用户组与权限管理

    一.用户与组 1.用户 管理员:root,UID为0 普通用户:1-60000 自动分配 系统用户:1-499,1-999(Centos7),对守护进程分配获取资源进行权限分配 登录用户:500+,1 ...

  8. Linux进程管理工具vmstat,iostat,pmap

    一查看内存的工具——vmstat (一)vmstat的介绍 vmstat vmstat是Virtual Memory Statistics(虚拟内存统计)的缩写 利用vmstat命令可以对操作系统的报 ...

  9. UITableViewCell的移动

    看到Metro大都会 这个App中扣款顺序有个cell可以移动,于是觉得是时候回忆一下UITableView的基本使用了.其实他这个移动cell的功能是系统自带的. 代码主要是这样: // // Vi ...

  10. Shiro安全框架的说明及配置入门

    Shiro是什么? Shiro是一个非常强大的,易于使用的,开源的,权限框架.它包括了权限校验,权限授予,会话管理,安全加密等组件 什么时候使用它呢? 如果你是设计RBAC基础系统,需要编写大量用于权 ...