CSS字体图标和CSS三角

最新推荐文章于 2023-07-18 13:04:34 发布

学习中的小菜鸟.

最新推荐文章于 2023-07-18 13:04:34 发布

阅读量134

点赞数

分类专栏： CSS高级技巧文章标签： css

本文链接：https://blog.csdn.net/qq_33962481/article/details/110931465

版权

CSS高级技巧专栏收录该内容

9 篇文章 0 订阅

订阅专栏

字体图标

字体图标的下载
字体图标的使用
字体图标的追加
CSS三角
CSS三角实例

字体图标的下载

http://icomoon.io

字体图标的使用

把下载包里面的fonts 文件夹放入页面根目录下
在CSS样式中全局声明字体 : 简单理解把这些字体文件通过css引入到我们页面中
html标签内添加小图标
给标签声明字体

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?p4ssmb');
            src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        span {
            font-family: 'icomoon';
            font-size: 100px;
            color: blue;
        }
    </style>

</head>

<body>
    <span></span>
</body>

</html>

字体图标的追加

在这里插入图片描述

CSS三角

给一个盒子设置高度和宽度都是0, 再给每个边框不同的颜色
在这里插入图片描述
所以三角形就是给三个边一个透明边框, 给另外一个边框设置一个实线边框, 就是一个三角形

CSS三角实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .jd {
            position: relative;
            width: 120px;
            height: 250px;
            margin: 60px auto;
            background-color: pink;
        }
        
        .jd span {
            position: absolute;
            top: -10px;
            right: 20px;
            width: 0px;
            height: 0px;
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
    </style>
</head>

<body>
    <div class="jd">
        <span></span>
    </div>
</body>

</html>

学习中的小菜鸟.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS字体图标和CSS三角

字体图标字体图标的下载字体图标的使用字体图标的追加字体图标的下载http://icomoon.io字体图标的使用把下载包里面的fonts 文件夹放入页面根目录下在CSS样式中全局声明字体 : 简单理解把这些字体文件通过css引入到我们页面中html标签内添加小图标给标签声明字体<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta
复制链接

扫一扫

专栏目录