三角形-css
/*箭头向上*/
.arrow-up {
width:;
height:;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #000;
} /*箭头向下*/
.arrow-down {
width:;
height:;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-top:30px solid #0066cc;
} /*箭头向左*/
.arrow-left {
width:;
height:;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid yellow;
} /*箭头向右*/
.arrow-right {
width:;
height:;
border-top:30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid green;
} /*箭头无封口*/
.deg{
width:30px;
height:30px;
border-left:1px solid red;
border-bottom:1px solid red;
margin-left:100px;
transform:rotate(-45deg);
}
css写三角形
三角形-css的更多相关文章
- Effective前端3:用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- CSS盒模型之三角形
W3上介绍盒模型: 这里教程,但是太过于简单了,http://www.w3.org/community/webed/wiki/CSS/Training/Box_model. 如图,盒模型和背景属性控制 ...
- CSS绘制三角形和箭头,不用再用图片了
前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...
- HTML 和 CSS 画三角形和画多边行基本原理及实践
基本 HTML 标签 <div class = 'test'></div> 基本 CSS 代码 .test { width: 100px; height: 100px; bac ...
- 利用纯css写三角形,弧度箭头,吃豆人,气泡。放大镜,标签的源码
1. 向上三角形
- css 折角效果/切角效果
首先我们先创建一个图案为100像素的斜面切角的图案 html <div class="one">12345</div> css .one{ width: 1 ...
- canvas 实现渐变色填充的三角形
实现效果 效果一: 效果二: 实现思路 canvas实现 1. 绘制三角形 // html <canvas id="triangle" width="30" ...
- CSS3新特性,绘制常见图形
前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等.以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形. 在此之前我们有必 ...
- 【转】js面试题,明确自己的不足
https://blog.csdn.net/m0_37631322/article/details/85409716 -------------------- 2018年12月30日 21:05:43 ...
随机推荐
- 理清C++常量指针和指针常量这团乱麻
写在前面: 与其说C++中的常量指针和指针常量是一块很有嚼头的语法糖,不如说它是一块相当难啃的骨头.其实本来没什么,这无非是const int *p与int* const p的区别, 但一涉及到起名字 ...
- Extjs MVC学习随笔01
Extjs Mvc模式下的整个MVC框架体系即下图: 包含了Controller(实现方法层),Store(数据来源管理层),View(页面布局层).之所以用MVC我想是因为减轻针对某一页面的单一的J ...
- js的match()方法介绍
定义和用法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. 该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置. ...
- Cocos2d-x 核心概念 - 层(Layer)
层(Layer) 一个简单的主界面是由是三个层叠加实现的,从上到下依次为,菜单层,精灵层,背景层 这个次序适用与事件的响应机制,菜单层最先接受到系统事件,然后精灵层,最后背景层 在事件传递的过程中,如 ...
- [SQL] SQL 查出一张表中重复的所有记录
在A表中存在一个字段“AccountId”,而且不同记录之间的“AccountId”值有可能会相同,现在就是需要查询出在该表中的各记录之间,“AccountId”值存在重复的项,这里count记录该字 ...
- 火狐浏览器 js 1到9月份 new DATE不返回时间
new Date('2016-1'); //错误 1到9月份必须 01 02 ...... 正确 new Date('2016-01'); var nowMonth = nowMonth>=10 ...
- neo4j中文社区
关于Neo4j中文社区 官网:http://neo4j.com.cn/ Neo4j 社区为国内具影响力的 Neo4j技术社区,致力于 Neo4j 的技术研究. Neo4j 社区由一批热爱 Neo4j ...
- 日常积累之JSON.stringify和JSON.parse substr
1.substr(start,len) 从字符串中读取内容,第一个参数是读取的首位置,如果为负数,则从末尾倒数计数. 第二个参数是要读取的长度. eg: var str = "silence ...
- 项目部署到tomcat Root中后导致 WebApplicationContext 初始化两次的解决方法
上一篇文章刚说项目部署到tomcat的ROOT中,今天就发现一个问题.通过eclipse启动tomcat时候,WebApplicationContext 初始化两次: 现象: 通过eclipse控 ...
- XUtils3 的 环境搭建
XUtils3 的 环境搭建 环境搭建三部曲 ----------------------- 说明 : author 修雨轩陈 使用andorid Studio 已经创建了一个项目 并且自己需要使用 ...