使用css画一个叉 “X”

56 阅读 0 评论 37 点赞

我是靠谱客的博主激情鞋垫，最近开发中收集的这篇文章主要介绍使用css画一个叉 “X”，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

<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>