css实现antd丝带效果

已于 2024-12-13 15:11:10 修改
阅读量475 收藏 2
点赞数 2
文章标签： css css3 前端
于 2024-11-01 01:05:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62323931/article/details/143421045
版权

先上效果图：

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .ant-ribbon {
        box-sizing: border-box;
        margin: 0;
        padding: 0 8px;
        color: #1677ff;
        font-size: 14px;
        line-height: 22px;
        list-style: none;
        position: absolute;
        top: 8px;
        white-space: nowrap;
        background-color: #1677ff;
        border-radius: 4px;
        border-end-end-radius: 0;
    }

    .ant-ribbon-text {
        color: #ffffff;
    }

    .ant-ribbon-placement-end {
        inset-inline-end: 8px;
        border-end-end-radius: 0;
    }

    .ant-ribbon-corner {
        position: absolute;
        top: 100%;
        width: 8px;
        height: 8px;
        color: currentcolor;
        border: 4px solid;
        transform: scaleY(0.75);
        transform-origin: top;
        filter: brightness(75%);
        box-sizing: border-box;
        inset-inline-end: 0;
        border-inline-end-color: transparent;
        border-block-end-color: transparent;
    }

</style>

<body>
    <div class="ant-ribbon ant-ribbon-placement-end">
        <span class="ant-ribbon-text">5.17.0</span>
        <div class="ant-ribbon-corner">
        </div>
    </div>
</body>

</html>

赠送一个下边框阴影 box-shadow: 0px 16px 8px -8px rgba(5, 5, 5, 0.06);

css3 彩带扩散效果_6种精美的纯CSS3丝带效果
weixin_42662171的博客
01-13 1495
这是一组非常精美的纯CSS3丝带设计效果。这组丝带效果分别使用:before和:after伪元素来制作各种丝带，适用于要使用丝带效果的各种不同场景。使用方法HTML结构这些丝带效果的HTML结构：使用一个作为容器，在它里面放置一些元素。元素及其伪元素用于制作各种丝带效果。丝带效果1丝带效果2丝带效果3丝带效果4丝带效果5丝带效果6CSS样式div.ribbon是丝带的容器，丝带放置在它的上面。在例...
CSSModule与antd样式冲突的解决方案
qq_41672008的博客
06-15 2882
CSSModule与antd样式冲突的解决方案 在webpack.config.js进行如下配置： // webpack.config.js { test: /\.css$/, exclude:[/node_modules/], use: [ 'style-loader', // 'css-loader' { load
CSS 丝带形状效果
DHLSP15的博客
12-29 1434
CSS 丝带形状效果
纯CSS3实现一个丝带效果
祈澈菇凉
12-05 1986
要实现一个边角有丝带的效果，如上图左上角的标识。示例代码如下所示： <!DOCTYPE HTML> <html lang="en"> <head> <meta charset=utf-8> <title>css边角丝带效果</title> &...
CSS技巧：用CSS绘制超写实的酷炫徽章缎带效果，超漂亮，超酷炫
uu0216的博客
07-06 1433
因为css的边框属性，不支持渐变，所以，为了实现这个效果，我们需要两个圆。嗯，其实这个第一个圆，也要比第一步我们做的圆小一些，模拟徽章最外径和刻线之间的距离。用shape_text的伪类 before 和after 制作两个与背景色完全相同的三角形，调整到两个蓝色方块的外侧，实现视觉上的缺角效果。按照上一步的思路，利用 shape_in 的伪类 before 和after 再同样写两个圆，覆盖在这两个圆的上面。下面的div里，文字底端对齐，然后是不是只要以图形中点为圆心，旋转文字的容器，就能实现了呢？
纯CSS实现UI设计中常见的丝带效果
jnfy的博客
10-11 388
纯CSS实现UI设计中常见的丝带效果
使用css在照片右上角设置缎带效果
左直拳的马桶_日用桶
07-31 490
transform-origin 属性定义了一个元素在进行变换（如旋转、缩放、倾斜等）时的基准点或中心点。默认情况下，transform-origin 的值是 center，即变换围绕元素的中心点进行（元素就是旋转的dom，在本例子中，就是写着“封面”二字的div）。上面的例子，如果没有旋转，就是一个普通的，水平放置在照片右上角的块。至于为何要将right设为负数，可以想象一下如果不设为负数，这个div围绕自己的中心点顺时针旋转45度后是个啥样子。这里的旋转是顺时针方向，使 .ribbon 斜斜地放置。
CSS3制作Dropdown下拉菜单的方法
01-19
先上效果图 正如标题所说，本文是教你如何巧用CSS3:target伪类制作Dropdown下拉菜单，原生HTML+CSS，无JavaScript。为了吸引各位往下看，先上实际例子，再进行剖析。 Duang~ 实际例子其实就是DeveMobile 主题的右上...
react实现antd线上主题动态切换功能
12-09
我们将探讨如何通过`antd-theme-generator`库来实现这个功能。 首先，对于CSS切换的两种传统方法，一种是根据用户选择的主题动态加载不同的CSS文件，但这种方法会导致页面重载，影响用户体验。另一种是单纯引入所有...
antd-custom-theme-generator:一种使用零配置创建antd主题CSS文件的简单方法
05-11
一种使用零配置创建antd主题css文件的简单方法。 提供了大量的UI组件，样式。 您可以自定义默认主题，修改较少的变量，为达到这一目的，您可以采用多种方式（）。 问题是您没有一种简单的方法来创建配置为零的静态...
缎带css代码,CSS3 获奖缎带
weixin_34477616的博客
08-03 188
CSS语言：CSSSCSS确定@import url(http://fonts.googleapis.com/css?family=Mountains+of+Christmas:700);* {margin: 0px;padding: 0px;}html {min-height: 100%;}body {min-height: 100%;background: #a90329;background...
缎带css代码,CSS缎带效果
weixin_34923852的博客
08-03 269
.ribbon-content {border: 1px solid #DDD;font-weight: bold;margin: 0 -10px;min-height: 30px;padding: 7px 31px;text-align: center;line-height: 30px;}.ribbon-left {display: block;border-left: 10px solid ...
如何用css实现彩带样式,CSS3 彩色丝带
weixin_39801991的博客
08-03 3003
JavaScript语言：JaveScriptBabelCoffeeScript确定document.addEventListener('touchmove', function (e) {e.preventDefault()})var c = document.getElementsByTagName('canvas')[0],x = c.getContext('2d'),pr = window...
CSS缎带效果
weixin_30732487的博客
11-10 207
1. [代码]ribbon.html <!DOCTYPE HTML><html><head><style type="text/css">.ribbon-content { border: 1px solid #DDD; font-weight: bold; margin: 0 -10px; min-height: 3...
缎带css代码,使用CSS分别实现的缎带和横幅
weixin_34420979的博客
08-03 246
CSS语言：CSSSCSS确定/* =========Get Fonts */@import url(http://fonts.googleapis.com/css?family=Quicksand);/* ================Assign Variables *//* ===========================Setup Mixins/Helper Classes */....
html+css做的丝带标签
weixin_34209851的博客
05-27 443
先上效果： HTML: 　　<div class="tag"> 　　　　<div class="tag-box"> 　　　　　　<div class="tag-content-box"> 　　　　　　　　<div class="tag-content"> 　　　　　　　　　　<span class=...
常见的CSS图形绘制合集
qq_43067585的博客
08-24 674
展示40多个常见的纯CSS绘制图形，效果实时，含源代码，想要什么效果直接复制粘贴就好了。就算项目用不到，看看别人代码怎么写的也有助于提高CSS的基本功。 以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的。 1. 正方形 实时渲染效果如下： 相关CSS代码： #square { width: 100px; height: 100px; background: red; } 2. 长方形 效果： 相关CSS代码： #rectangle { width:
CSS布局与响应式
最新发布
pscool的博客
01-16 631
学习链接 Grid网格布局 前端五大主流网页布局 flex布局看这一篇就够了 grid布局看这一篇就够了 用六个案例学会响应式布局 伸缩盒+响应式页面布局实战 实现响应式布局的五种方式 - csdn 如何完成响应式布局，有几种方法？看这个就够了 响应式布局总结 Flexbox 打造栅格系统 CSS中 自定义属性（变量）详解 CSS 之 z-index 属性详解 CSS深入理解z-index（z-index相关知识总结） 文章目录学习链接第一章 介绍1、课程介绍现代布局四大核心技术课程收获涵盖内容2、常见布局
Vue3.0结合Vite实现antd主题动态切换教程
资源摘要信息: "该压缩包包含了一套利用Vue3.0、Vite和antd 2.0构建的示例项目，主要展示了如何在前端应用中实现动态切换主题的功能。通过该项目，开发者可以了解如何将antd UI组件库与Vue3.0结合，并通过Vite进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值