<!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. 简述amixer及其用法

    最近接触到amixer,大概明白了其意思和具体用法,简述如下. alsamixer是Linux 音频架构ALSA中的Alsa工具的其中一个,用于配置音频的各个参数. alsamixer是基于文本下的图 ...

  2. 150. Evaluate Reverse Polish Notation (Stack)

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  3. 【原】Mac下统计任意文件夹中代码行数的工

    [链接][原]Mac下统计任意文件夹中代码行数的工http://www.cnblogs.com/wengzilin/p/4580646.html

  4. HEIDSOFT

    HEIDSOFT ENTHUSIASTIC GITHUB USER heidsoft@sina.com GitHub Profile I'm a developer based in China.sh ...

  5. CecOS Virtualization

    CecOS CecOS 是 OPENFANS 为中小型企业提供企业开源云计算解决方案的基础框架:CecOSvt 是一款运行在社区企业云操作系统(CecOS)上的虚拟化开放式解决方案. 也可用演示模式. ...

  6. 关于jdk7中 使用Collections的排序方法时报Comparison method violates its general contract!异常

    参考: Comparison method violates its general contract Comparison method violates its general contract! ...

  7. 相机IMU融合四部曲（二）：误差状态四元数详细解读

    相机IMU融合四部曲(二):误差状态四元数详细解读 极品巧克力 前言 上一篇文章,<D-LG-EKF详细解读>中,讲了理论上的SE3上相机和IMU融合的思想.但是,还没有涉及到实际的操作, ...

  8. code1225 搭积木

    题目分析:将当前层定义为第h层,共用了n块积木,本层积木数为m,f(h,n,m) 那么可以扩展数两种状态:f(h-1,n-m,m-1),f(h-1,n-m,m+1) 直接搜索可能的数据达到h^m,超时 ...

  9. easyui 获取当前页签选中的名称

    parent.parent.$("#tabs").tabs('getSelected').panel('options').title == "收藏夹管理"

  10. Oracle——视图

    视图是一种虚表. 视图建立在已有表的基础上, 视图依赖的这些表称为基表. 视图向用户提供基表数据的另一种表现形式 对视图数据的修改会影响到基表中的数据 视图的优点 控制数据访问 简化查询 避免重复访问 ...