我是靠谱客的博主 激情鞋垫,这篇文章主要介绍使用css画一个叉 “X”,现在分享给大家,希望可以做个参考。

这是以uniapp为例;在vue中使用需要把标签和单位转换一下

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template> <view class="right_x"></view> </template> <style lang="scss" scoped> .right_x { // 宽高改这里就行了 $width: 30rpx; // 通过计算得出的宽高比例 $height: ($width / 7); position: absolute; top: 0; right: 0; width: $width; height: $width; cursor: pointer; background: #000; line-height: 0; font-size: 0; &::after, &::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; bottom: 0; margin: auto; width: $width; height: $height; background: #fff; -webkit-transform: rotate(-45deg); } &::before { -webkit-transform: rotate(45deg); } } </style>

最后

以上就是激情鞋垫最近收集整理的关于使用css画一个叉 “X”的全部内容,更多相关使用css画一个叉内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(70)

评论列表共有 0 条评论

立即
投稿
返回
顶部