<!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. Centos6、7 PHP5.4 5.5 5.6安装

    https://www.mojowill.com/geek/howto-install-php-5-4-5-5-or-5-6-on-centos-6-and-centos-7/ https://blo ...

  2. SPI protocol驱动编写实例

    内核版本:3.9.5 Linux中SPI驱动有俩个部分组成:controller驱动,直接和底层硬件打交道,protocol驱动,针对特定的设备,也是我们要做的. 这里只考虑SPI protocol驱 ...

  3. ios crash log

    1.IOS策略 1.1 低内存闪退 前面提到大多数crash日志都包含着执行线程的栈调用信息,但是低内存闪退日志除外,这里就先看看低内存闪退日志是什么样的.我们使用Xcode 5和iOS 7的设备模拟 ...

  4. [C++] struct memory allocation

    MAX-byte alignment (最大单位对齐) typedef struct user USER; typedef struct employee E; struct user{ ]; //t ...

  5. 为什么丑陋的UI界面却能创造良好的用户体验？

    本文内容由Mockplus团队翻译. 官网:http://www.mockplus.cn 网站界面过于漂亮可能会影响网站的可用性,但本文中提到的5个网站界面可谓是“丑”出了新高度.这样的网站它还有可用 ...

  6. debian 9 更换源 使用国内源 配置方法

    配置前请先参考: https://wiki.debian.org/SourcesList https://www.debian.org/mirror/list https://mirrors.tuna ...

  7. Photo1

    Story: 想象你是一个乡村的孩子,你有着健康的肤色,正在和家人一起坐在颠簸的马车上,赶着去城里买东西.正值夏日,黄昏的阳光晒在你的脸上,于是你的脸显得红扑扑的.路上满满的都是葱绿的草和参差不齐的树 ...

  8. Perl 学习笔记－子程序

    1.定义子程序 使用sub关键字定义 ;   子程序名和标识符同要求, 但是有的特殊的可以用 &符号;  子程序是全局的, 不需要再使用前声明;  重名函数后者覆盖前者. sub roger{ ...

  9. servler配置

    <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...

  10. ScreenCapturePro2 for Joomla_3.4.7-tinymce4x

    1.1. 与Joomla_3.4.7-tinymce4x整合 示例下载:Joomla_3.4.7,   1.1.1. 添加screencapture文件夹   1.1.2. 2.添加插件文件夹 路径: ...