经常写移动端页面时会用到向右的箭头，之前都是用图片，突然想到用css应该也能写，于是一搜还确实有

width: 7px;

height: 7px;

border-top: 2px solid #ffffff;

border-right: 2px solid #ffffff;

transform: rotate(45deg);

原理也挺简单，就是写个上边框和右边框，然后旋转45度就是向右的箭头了。不过移动端用应该没问题，pc上就要考虑transform的兼容性了。

css 写一个向右的箭头的更多相关文章

  1. 还在为小三角形切图？使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  2. 玩玩CSS,写一个图标堆叠效果

    遇到有人问如下效果怎么写,一时兴起,自己写一个玩玩. 看到这个样子,首先应该考虑一下 DOM 结构,以我的观点,把DOM结构设计为如下形式: <div> <img src=" ...

  3. CSS写一个圣诞树Chrome浏览器小插件

    一时兴起,突然想写一个Chrome浏览器插件,不知道写啥,就写了一个圣诞树小插件.项目源码>> Chrome浏览器插件 Chrome浏览器插件最主要的是:index.html.manife ...

  4. 如何用css写一个带斜切角、有边框又有内外阴影的按钮呢？

    如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角.有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容.大小都是可变的,那得切多少图啊~Canvas?SVG?No,no ...

  5. 纯css写一个大太阳的天气图标

    效果 效果图如下 ​ 实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来 ...

  6. Java-Web 用html和css写一个EasyMall注册界面

    要求: html代码: <!DOCTYPE html> <html> <head> <title>EasyMall注册页面</title> ...

  7. css写一个梯形

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>D ...

  8. 用html和css写一个头部header和左侧菜单栏menu-bar固定的的页面

    这个页面header部分是100%的宽度,60px的高度,左侧是刚好一屏的高度,180的宽度,右侧的部分把剩余的空间占满,刚开始的时候还没怎么接触这样的页面,以为使用js读取浏览的可视化宽高,然后在做 ...

  9. 用html，CSS 写一个静态的博客网页

    <!doctype html> <html> <br/><br/><br/> <head> <meta http-equi ...

随机推荐

  1. Dubbo入门到精通学习笔记（十三）：ZooKeeper集群的安装、配置、高可用测试、升级、迁移

    文章目录 ZooKeeper集群的安装.配置.高可用测试 ZooKeeper 与 Dubbo 服务集群架构图 1. 修改操作系统的/etc/hosts 文件,添加 IP 与主机名映射: 2. 下载或上 ...

  2. Dubbo入门到精通学习笔记（五）：持续集成管理平台之sonarqube代码质量管理平台的介绍与安装

    文章目录 SonarQube的介绍 SonarQube的安装 安装简介 详细安装过程 详细使用过程 SonarQube的介绍 SonarQube是一个管理代码质量的开放平台. 可以从七个维度检测代码质 ...

  3. HDU 6590 Code (判断凸包相交)

    2019 杭电多校 1 1013 题目链接:HDU 6590 比赛链接:2019 Multi-University Training Contest 1 Problem Description Aft ...

  4. csv 基本操作， 报错解决（UnicodeEncodeError: 'utf-8' codec can't encode characters in position 232-233: surrogates not allowed）

    最常用的一种方法,利用pandas包 import pandas as pd #任意的多组列表 a = [1,2,3] b = [4,5,6] #字典中的key值即为csv中列名 dataframe ...

  5. 进程共享变量#pragma data_seg用法

    #pragma data_seg介绍 用#pragma data_seg建立一个新的数据段并定义共享数据,其具体格式为: #pragma data_seg ("shareddata" ...

  6. ThinkPHP5实用的数据库操作方法

    1.update方法总结 /** * 设置记录的某个字段值 * 支持使用数据库字段和方法 * @access public * @param string|array $field 字段名 * @pa ...

  7. 优雅地使用 VSCode 来编辑 vue 文件

    javascript visual-studio-code vue.js 当然 vscode 对 vue 也不是原生支持的,今天来扒一扒如何配置 vscode 以便优雅地编辑 vue 文件 先来扒一扒 ...

  8. 微信小程序之模板消息推送

    最近在用sanic框架写微信小程序,其中写了一个微信消息推送,还挺有意思的,写了个小demo 具体见官方文档:https://developers.weixin.qq.com/miniprogram/ ...

  9. yes - 不断输出一个字符串,直到杀死其为止

    SYNOPSIS(总览) yes [OPTION]... [STRING]... DESCRIPTION(描述) 不断输出包括所有指定STRING(s)的一行,或者是`y'. --help 显示帮助并 ...

  10. 生成对抗网络（GAN）的18个绝妙应用

    https://juejin.im/post/5d3fb44e6fb9a06b2e3ccd4e 生成对抗网络(GAN)是生成模型的一种神经网络架构. 生成模型指在现存样本的基础上,使用模型来生成新案例 ...