css 绘制三角形
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>三角形</title>
<style>
div{
width:0;height:0;
border: 20px solid;
/*平分效果*/
border-color:red green blue black;
/*单个三角形*/
/*border-color:transparent transparent lightgreen transparent;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
/* 向上的箭头 */
.dot-top {
position: relative;
top: 21px;
left: 3rem;
font-size: 0;
line-height: 0;
border: 10px dashed #eeeeee;
border-top-width: 0;
border-right-color: transparent;
border-bottom-style: solid;
border-left-color: transparent;
}
/* 向下箭头旋转-展开内容 */ i{
width: .14rem;
height: .08rem;
background: url('../images/down@2x.png') no-repeat center;
background-size: 100% 100%;
transition: transform 0.3s ease;
-moz-transition: -moz-transform 0.3s ease;
-webkit-transition: -webkit-transform 0.3s ease;
-o-transition: -o-transform 0.3s ease;
}
.up {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
css 绘制三角形的更多相关文章
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- CSS学习笔记(8)--纯CSS绘制三角形(各种角度)
纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单. 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
- CSS绘制三角形和箭头,不用再用图片了
前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...
- CSS绘制三角形和箭头
<html> <head> <meta charset="utf-8"> <title>CSS绘制三角形和箭头</title& ...
- 用CSS绘制三角形
其实用HTML CSS绘制三角行 是非常简单的 ,我在网上看了不少人写的博客,里面写的好复杂样子,反正我是看的云里雾里的,说实话是挺简单的. 首先提出一段代码: <!DOCTYPE html&g ...
- 纯Css绘制三角形箭头三种方法
在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...
- CSS绘制三角形的原理剖析
今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret { display: inline-block; ; ; margin-left: 2px; vertical-align: ...
- 纯CSS绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 纯CSS绘制三角形(各种角度)类似于使用字符画法,根据位移不同,也可以使用两个元素画出三角边框
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
随机推荐
- MYSQL 企业常用架构与调优经验分享
一.选择Percona Server.MariaDB还是MYSQL mysql应用源码:http://www.jinhusns.com/Products/Download/?type=xcj 1.M ...
- consul kv使用介绍
有两种方法与Consul K/V交互的方式 HTTP API Consul KV CLI WEB访问 命令行使用 帮助命令:consul kv --help 列出所有kv:consul kv get ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
- JDK1.8 HashMap源码分析
一.HashMap概述 在JDK1.8之前,HashMap采用数组+链表实现,即使用链表处理冲突,同一hash值的节点都存储在一个链表里.但是当位于一个桶中的元素较多,即hash值相等的元素较多时 ...
- JAVA IO练习
停车场有进场和出场的功能1. 进场时:采用键盘录入的方式,录入汽车的品牌.颜色.车牌号. 把品牌.颜色.车牌号,以及进场时间写入car.txt文件中. 2. 出场时:键盘录入车牌号,去文件中查找该车 ...
- 使用PHP做分页查询(查询结果也显示为分页)
1.先把数据库里所有的数据分页显示在页面,并在显示数据的表格上方加上查询表单.(加上条件,实现目标结果.) <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- MySQL学习7 - 外键的变种 三种关系
一 介绍 二 如何找两张表之间的关系 三 表的三种关系 1.书和出版社 2.作者和书籍的关系 3.用户和博客 本节的重点 如何找出两张表之间的关系 表的三种关系 一 介绍 因为有foreign key ...
- 使用Roslyn编译项目的示例
using System; using System.Collections.Generic; using System.IO; using Microsoft.CodeAnalysis; using ...
- javascript基础 之 json
1,json是用于存储和传输的数据格式 全称:JSON 英文全称 JavaScript Object Notation json转化为javascript的规则: 数据为 键/值 对. 数据由逗号分隔 ...
- Houdini SDF/Raymarching/等高曲面绘制
1 , SDF <1> union min(a,b) <2> intersect: max(a,b) <3> Substract a-b : if(b> ...