CSS入门到实战之三角箭头的实现

像风一羊的女孩

于 2021-09-23 22:12:32 发布

阅读量469

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_45921611/article/details/120444394

版权

在生活中经常会遇到如下图所示一个大框旁边有一个三角箭头

那么它是如何实现的呐

首先，我们先来讨论三角箭头的实现

平常通过边框来实现的三角是无法设置边框的，毕竟三角本身就是边框来实现的，所以换一种思考方式来想，通过定位来完成

是的，方法就是白色的三角压盖灰色三角，使用定位是非常简单的。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .arrow {
            position: relative;
            width: 30px;
            height: 30px;
            border:1px solid #000;
            margin-left: 100px;
            margin-top: 100px;
        }
        /* 箭头的类 */
        /* 灰色三角形 */
        .arrow-right::before{
            content: '';
            position: absolute;
            left: 10px;
            top: 8px;
            width: 0;