css简易制作一个div右上角的三角形标签条、角标

 <body><div class="question_item"><div class="new-item-badge" v-if="isMine && !question.isFillIn">待提交</div></div></body><style>.question_item {position: relative;width: 200px;height: 200px;background-color: pink;border-radius: 5px;overflow: hidden;}// 鼠标经过 转动 抖动.question_item:hover .new-item-badge {transform: rotate(-40deg);-ms-transform: rotate(-40deg);-webkit-transform: rotate(-40deg);}.new-item-badge {position: absolute;background: #02a7f0;z-index: 999;width: 70px;text-align: center;height: 40px;line-height: 50px;border-radius: 3px; color: #fff;font-size: 12px !important;padding: 2px 4px 0;top: -11px;left: -26px;-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transition: 0 0.1s ease-in;-moz-transition: 0 0.1s ease-in;-o-transition: 0 0.1s ease-in;transition: transform 0.1s ease-in;}</style>

css简易制作一个div右上角的三角形标签条、角标相关推荐

html中各种js效果图,HTML+CSS+JS制作一个漂亮的橙子动态时钟
HTML+CSS+JS制作一个漂亮的橙子动态时钟 1. 效果图: 2. 背景产生: 利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里,利用径向渐变形成橙皮. background: rad ...
[css] 怎样把一个div居中？怎样把一个浮动元素居中？怎样把绝对定位的div居中？
[css] 怎样把一个div居中?怎样把一个浮动元素居中?怎样把绝对定位的div居中? 主要用到:text-alin: center;margin: 0 auto;position: relative ...
利用CSS浮动制作一个简易导航栏
初学CSS,利用CSS浮动和无序列表制作一个简易导航栏: <!DOCTYPE html> <html lang="en"> <head>< ...
退出图标html css 实现,用一个div画出关闭图标
今天实现一个用一个div来实现关闭按钮图标,其中主要用到的技巧:css3伪元素:before,:after,css3的transform:rotate(),同时让该图标居中,此次是用了flex弹性布 ...
css：只用一个div实现八卦图
只用一个div实现一个八卦图效果图: html: <div></div> css: 方法一 :(利用边框) <style>div{width: 100px;hei ...
用DIV+CSS技术制作一个简单的网页我的家乡主题
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
html一个div浮动在另一div上,css – 在另一个DIV的顶部浮动DIV
我最近被分配了复制我们以前的Web开发者制作的JS弹出窗口的工作.我有一个非常相似但有一件事我不能得到,关闭按钮(X)漂浮在弹出的右上角的弹出窗口(而不是坐在弹出窗口的右上角).我已经尝试了在Stac ...
如何用css只做一个div鼠标点击变色
先写一个html文件 <!DOCTYPE html> <html> <head><meta charset="utf-8">< ...
用html+css+jQuery制作一个简单的流程图/步骤图
首先在页面内需要呈现的区域创建一个容器,用来之后append新元素. <body><div class="container"></div>&l ...

css简易制作一个div右上角的三角形标签条、角标

css简易制作一个div右上角的三角形标签条、角标相关推荐

最新文章

热门文章