<!DOCTYPE html>

<html lang="en" class="muui-theme-webapp-main">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport"

          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1">

    <meta name="format-detection" content="telephone=no">

    <meta name="apple-mobile-web-app-status-bar-style" content="white">

    <meta name="apple-mobile-web-app-capable" content="no">

    <title>Css arrow</title>

</head>

<style type="text/css">

    #triangle-facing-right {

        display: inline-block;

        margin: 72px;

        border-right: 24px solid; border-bottom: 24px solid;

        width: 120px; height: 120px;

        transform: rotate(-45deg);

    }

    #triangle-facing-left {

        display: inline-block;

        margin: 72px;

        border-left: 24px solid; border-bottom: 24px solid;

        width: 120px; height: 120px;

        transform: rotate(45deg);

    }

</style>

<body>

<div id="triangle-facing-right"></div>

<div id="triangle-facing-left"></div>

</body>

</html>

效果图：

css3箭头的更多相关文章

  1. css3箭头效果

    css3 record1 尝试用css写了个箭头效果 思路就是通过span和span子元素i分别通过设置他们的伪元素构造两个箭头,但是i构造的箭头两条线height都是0,hover的时候渐近的动画效 ...

  2. CSS3动画箭头

    <style type="text/css"> .arrow { display: block; width: 20px; height: 20px; position ...

  3. 利用CSS3特性巧妙实现漂亮的DIV箭头

    DIV箭头用于表现DIV内容的指向,是使用非常普遍的一种表现形式,例如新浪微博的消息转发: 还有傲游网站的导航条: 像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的效果. 传统的实现方式都 ...

  4. css3实现小箭头，各种图形

    转:http://blog.csdn.net/tangtang5963/article/details/51490107 https://segmentfault.com/a/119000000278 ...

  5. css3的一个小demo（箭头hover变化）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery和css3控制箭头丝滑旋转

    问题: 我们经常会遇见点击一个小三角使之丝滑的旋转180度上下旋转,怎么实现呢,需要css3搭配jq 来处理 如图:1.点击前 2.点击后(效果丝滑旋转)                 1.html ...

  7. css3 伪类实现右箭头→

    css3 实现右箭头→ <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  8. css3写箭头

    左箭头 .left-arrow { position: absolute; left: 6%; top: 31%; overflow: hidden; zoom:; width: 0.4rem; he ...

  9. 用CSS3实现上下左右箭头

    225deg 向上箭头 135deg向下箭头45deg向右箭头 -45deg向左箭头

随机推荐

  1. 【LA3126 训练指南】出租车 【DAG最小路径覆盖】

    题意 你在一座城市里负责一个大型活动的接待工作.明天将有m位客人从城市的不同的位置出发,到达他们各自的目的地.已知每个人的出发时间,出发地点和目的地.你的任务是用尽量少的出租车送他们,使得每次出租车接 ...

  2. 128. Longest Consecutive Sequence (HashTable)

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...

  3. java实现文件的拷贝以及文件的删除

    /** * 将文件拷贝到指定目录 * @param oldAddress 文件所在目录(文件的全路径) * @param newAddress 指定目录(包含复制文件的全名称) * @throws E ...

  4. H5 css学习

    p{text-indent:2em;}段前空两格   段落排版--行间距(行高) p{line-height:1.5em;} 段落排版--中文字间距.字母间距  h1{    letter-spaci ...

  5. Python open()文件处理使用介绍

    1. open()语法open(file[, mode[, buffering[, encoding[, errors[, newline[, closefd=True]]]]]])open函数有很多 ...

  6. @EnableAsync annotation metadata was not injected Spring容器启动后访问Servlet报错

    @EnableAsync annotation metadata was not injected 2015年12月20日 20:06:54 7570 在初始化spring事务部分碰到该错误, 详细错 ...

  7. 嵌套列表的加权和 · Nested List Weight Sum

    ［抄题］: Given a nested list of integers, return the sum of all integers in the list weighted by their ...

  8. java的web.xml中<url-pattern>配置[转]

    <servlet-mapping> <servlet-name>downLoadFile</servlet-name> <url-pattern>*.l ...

  9. Mysql中自定义函数编程

    1.语法 1.1 新建函数 Create function function_name(参数列表) returns 返回值类型 函数体 (1)函数名,应该合法的标识符,并且不应该与已有的关键字冲突. ...

  10. 案例研究：手机APP的UI设计流程

    以下内容由Mockplus(http://www.mockplus.cn)团队翻译整理,仅供学习交流. UI设计——不仅仅是创造漂亮的图像. 面临的挑战 我为自己提供了一个绝佳的机会来训练我的视觉设计 ...