<!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. 关于启动MongDB的mongod.exe文件闪退的问题

    昨天学mongdb的时候,遇到了mongod.exe闪退的问题,解决办法很简单: 你可以不执行mongod.exe,直接用命令行操作 在你安装mongdb的盘的根目录下创建一个data文件夹,一定要在 ...

  2. emulator: Trying to vcpu execute at eip:6d4053

  3. 802.11bgn信道划分及WirelessMon规划频段

    一.802.11bgn模式支持14信道,第14信道一般不使用.对应频率范围如下: Channel Frequency range Central Frequency ----------------- ...

  4. crontab学习笔记

    一.crond与crontab简介 在Linux系统中,循环运行的例行性计划任务,是由 cron (crond) 这个系统服务来控制的,而crontab命令则被用来提交和管理用户的需要周期性执行的任务 ...

  5. mysql5.6配置semi_sync

    测试环境:Red Hat Enterprise Linux Server release 6.3 (Santiago)Server version: 5.6.22-log MySQL Communit ...

  6. 复杂链表的复制（java）

    问题描述 时间输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点), 返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引 ...

  7. AspnetBoilerplate (ABP) Organization Units 组织结构管理

    ABP是一个成熟的.NET框架,功能完善.目前由于项目需要正在自学中. ABP对于组织节点管理这一基本上每个项目都要反复重复开发的内容,进行了自己的实现. 主要包括这些常用功能: 多租户 树结构管理的 ...

  8. VC6.0 中 添加/取消 块注释的Macro代码

    SAMPLE.DSM是微软提供的样例,使用的是vb语言.其中的 CommentOut 函数,是支持块注释的,可是这种/**/的注释方式,有时候用起来不是很方便,因为两个/会因为一个/而终止.对于大块代 ...

  9. understand的安装

    1.win7 64位下安装 1)下载Understand.4.0.908.x64.rar. 2)解压之,直接运行里面的Understand-4.0.908-Windows-64bit.exe. 3)选 ...

  10. [原创]升级SOUI WKE以支持_blank

    由于WKE的精简模式,导致原有的SOUI不支持针对诸多内容的调用,此处针对WKE的部分内容做升级,以支持对应的功能. 目的:使WKE可以_blank弹出新窗口. 由国人 海绵宝宝维护的WKE新分支:h ...