使用css画一个箭头
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>使用css画一个箭头</title>
<style type="text/css">
a{
font-size:2rem;
text-decoration: none;
color: gray;
}
a:after{
content: "";
width: 1rem;
height: 1rem;
display: inline-block;
border-top: 2px solid darkgray;
border-right: 2px solid darkgray;
transform: rotate(45deg);
}
</style>
</head>
<body>
<a href="#">我曾把完整的镜子打碎</a>
</body>
</html>
效果如下:

使用css画一个箭头的更多相关文章
- CSS画一个三角形,CSS绘制空心三角形,CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
- css画一个提示框
用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 【前端切图】用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...
- div+css画一个小猪佩奇
用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container&quo ...
- 用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- Effective前端3:用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- Effective前端1---chapter 2 用CSS画一个三角形
1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...
- Effective前端(3)用CSS画一个三角形
来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以 ...
- css实战#用css画一个中国结
大家好!今天跟大家分享一个用 css 画中国结的教程.最终效果如下: 大家如果感兴趣可以参考我的源码:gitHub地址 首先,我们定义好画中国结需要的结构: <div class="k ...
随机推荐
- 第一册:lesson 105.
原文: Full of mistakes. Where's Sandra,Bob? I want her. Do you want to speak to her? Yes I do. I want ...
- JS闭包作用域解析
什么是闭包? 简单理解,当在一个函数的外部访问函数内部定义的变量的时候就会形成一个闭包,由这个理解可以知道,当一个函数执行完成的时候,一般情况下,其作用域会被销毁,其内部定义的变量也会变得不可访问,所 ...
- .NET Core 如何使用Session
第一步先注册session: 在Startup.cs文件中的ConfigureServices方法中添加: services.AddSession(); 在Startup.cs文件中的Configur ...
- .NET Core Cache [MemoryCache]
参考资料:long0801的博客.MemoryCache微软官方文档 添加对Microsoft.Extensions.Caching.Memory命名空间的引用,它提供了.NET Core默认实现的M ...
- 【转】NotificationCopat.Builder全部设置
1.方法:setContentTitle(CharSequence title) 功能:设置通知栏标题. 例子:setContentTitle("测试标题"). 2.方法: ...
- Android Studio 关于沉浸式状态栏
values-v19/style.xml <style name="AppTheme" parent="Theme.AppCompat.Light.NoAction ...
- 详解Vue Native
译者按: 一家叫GeekyAnts的印度公司开发了Vue Native,基于React Native实现. 原文: Introducing Vue Native 译者: Fundebug 为了保证可读 ...
- oracle nvl,nvl2,coalesce几个函数的区别
1.nvl(exp1,exp2)该函数是处理表达式中的空值: 假设表达式exp1是空值,则该函数返回表达式exp2的值, 假设表达式exp1没有是空值,则该函数返回表达式exp1的值. 2.nvl2( ...
- 从.Net到Java学习第四篇——spring boot+redis
从.Net到Java学习系列目录 “学习java已经十天,有时也怀念当初.net的经典,让这语言将你我相连,怀念你......”接上一篇,本篇使用到的框架redis.FastJSON. 环境准备 安装 ...
- asp.net core webApi 参数保护
asp.net core webApi 参数保护 Intro asp.net core data protection 扩展,基于 IDataProtector 扩展的数据保护组件,自动化的实现某些参 ...