首页 > 其他分享 >CSS带小三角形的div框

CSS带小三角形的div框

时间:2022-09-22 11:24:22浏览次数:45  
标签:prompt fff1f0 solid hint div font border 三角形 CSS

效果图:

<span class="hint_prompt">超时20天</span>

.hint_prompt { border: 1px solid #fff1f0; border-radius: 4px; margin: 50px; text-align: center; border: 1px solid #fff1f0; position: relative; padding: 3px 5px; background: #fff1f0; font-family: PingFangSC-Regular; font-weight: 400; font-size: 14px; color: #fd4b40; } .hint_prompt::before { content: ""; position: absolute; left: -56px; top: -43px; width: 10px; height: 10px; margin: 50px; transform: rotate(-45deg); background: #fff1f0; z-index: 0; border-top: 2px solid #fff1f0; border-left: 2px solid #fff1f0; }

 

标签:prompt,fff1f0,solid,hint,div,font,border,三角形,CSS
From: https://www.cnblogs.com/yjd-05/p/16718546.html

相关文章

  • CSS3动画
    简介CSSanimations使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。......
  • css 列表样式,<a> 连接文字超长省略
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......
  • 仅使用 CSS 和 HTML 制作动画加载屏幕
    仅使用CSS和HTML制作动画加载屏幕关于如何仅使用CSS和HTML开发动画加载屏幕的教程编写一个简单的加载屏幕很容易。但是编写一个可以移动的动画加载屏幕确实具有......
  • CSS:浏览器的内核及了解,有哪些常见的浏览器内核?(面试题)
    浏览器的内核及了解?有哪些常见的浏览器内核?     浏览器要渲染出网页给用户看必须加载htm编码和js脚本渲染引擎渲染页面的UI和jd执行引擎操作内存,就是浏览器的内......
  • CSS的优先级如何计算?
    选择器的特殊性值分为四个等级行内样式:X000id选择器:0X00类选择器/伪类选择器/属性选择器:00X0元素选择器/伪元素选择器:000X在判断优先级时先看是否......
  • Codeforces Round #813 (Div. 2) - D. Empty Graph
    构造Problem-D-Codeforces题意给\(n(1<=n<=10^5)\)个点,与权值\(a_i\),这\(n\)个点组成一个完全图,\(a_l\)与\(a_r\)连的边的权值为\(min(a_l,a_{l+1}...a_{r......
  • Uni-app Vue 中CSS问题整理合集
    一、父组件设置子组件的样式:一般情况下子组件内部负责各自样式。不过在很多场合里,我们也会要求父组件来修改子组件默认样式。父组件可以通过传入class样式修改有限的样式......
  • Codeforces Round #821 (Div. 2) D E
    E首先发现无论何时,每个位置上至多只会有一个球。原因:每个时刻每个球都会移动,所以移动到某个点的时间一定,自然出生时间也一定,显然不可能会有2个点出生时间相同。既然如......
  • T1054 三角形判断(信息学一本通C++)
     目录 [题目描述]给定三个正整数,分别表示三条线段的长度,判断这三条线段能否构成一个三角形。如果能构成三角形,则输出“yes”,否则输出“no”。[输入]输入共一行,包含......
  • 监听div高度宽度的变化-自定义指令
    上篇内容说到,iframe嵌入其他项目页面,iframe实现自适应高度需要监听div页面高度的变化使用到了局部自定义指定directives:{//使用局部注册指令的方式resize:{//......