雪碧图的使用方法&css实现矢量小三角

最新推荐文章于 2023-01-13 23:14:13 发布

但行好事wlw

最新推荐文章于 2023-01-13 23:14:13 发布

阅读量192

点赞数 2

分类专栏： CSS HTML 文章标签： css css3 前端

本文链接：https://blog.csdn.net/egg_er/article/details/121023330

版权

CSS 同时被 2 个专栏收录

21 篇文章 6 订阅

订阅专栏

HTML

13 篇文章 0 订阅

订阅专栏

雪碧图的使用方法：

为什么要使用雪碧图？
网页想获得一张图片需要向服务器去申请，申请一次两次不是问题，但是一个网页打开的瞬间，那么多图片，申请过于频繁，于是有了一个好的想法，把需要的一些图片制作成雪碧图，也就是把许多个图片制作成一张大的图片，这样服务器只需要给他发送一次就行啦。
雪碧图如何使用呢？
首先知道雪碧图的原理：
雪碧图是通过调节位置来获取雪碧图中某个小的图片，也就是background-position:"x轴正方向,y轴正方向";
在这里插入图片描述

假设上图的矢量图的坐标是（200,50），大小是height:50px ,width:100px，那么想获得这个矢量图的方法就是：先利用background-image="url(地址)"获取雪碧图，然后让雪碧图向上移动50px,向左移动200px,利用background-position:"-50px -200px"; 如此方法就获得了这个图片。

CSS实现矢量小三角：

**原理：**结构放一个空盒子，给盒子的宽高都设置成0；此时给他添加边框，边框是有厚度的，边框一共有四个边，也就有四个方向的三角形
设计：

宽高设置成0；
给他设置一个边框，边框的长度就是三角形高度的一半，给border设置透明色
需要哪个方向的三角形给他设置哪个方向的边框即可

在这里插入图片描述
代码：

.box {
    height: 0;
    width: 0;
    border: 100px solid transparent;    
    border-top: 100px solid pink;
}
<body>
    <div class="box"></div>
</body>

边框的长度就是三角形高度的2倍
如图：
在这里插入图片描述

但行好事wlw

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
雪碧图的使用方法&css实现矢量小三角

雪碧图的使用方法：为什么要使用雪碧图？网页想获得一张图片需要向服务器去申请，申请一次两次不是问题，但是一个网页打开的瞬间，那么多图片，申请过于频繁，于是有了一个好的想法，把需要的一些图片制作成雪碧图，也就是把许多个图片制作成一张大的图片，这样服务器只需要给他发送一次就行啦。雪碧图如何使用呢？首先知道雪碧图的原理：雪碧图是通过调节位置来获取雪碧图中某个小的图片，也就是background-position:"x轴正方向,y轴正方向";假设上图的矢量图的坐标是（200,50），大小是height:
复制链接

扫一扫