css实现页面尖角 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

纯 CSS 实现下拉菜单尖角图标（实心+空心）

一、下拉实心尖角标实现代码： .angle { width: 0; height: 0; border-left: 10px solid transparent...; border-right: 10px solid transparent; border-bottom: 10px solid #000; } 二、下拉空心尖角标实现代码： <div class

4.2K3 0

css实现页面加载动画

5.1K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

分享一款带尖角浮出公告栏样式

这里所说的带尖角浮出公告栏就是指本站Devework.com上面logo右侧的广告栏，这个广告栏是纯用css+html打造的，没有使用图片。...下面先给出演示地址先(当然，本站也算是一个演示地址)：带尖角浮出公告栏样式:演示地址做这个带尖角浮出公告栏最核心的代码就是那个小尖角,大前端的是用◆字符来制作的，制作三角形也可以用这个原理。...据我所知，制作三角形的话还可以直接用css（好像border属性+margin=0），当然也可以直接用图片。...其实我认为用图片也没啥问题啊，用css做个三角形的代码占用空间比个用图片的都大，如果我将图片用cssscript合并，请求数几乎不增，总体还占用更少空间。...6px;top: 12px;margin-top:-6px;} .poptip-arrow-left em{left:1px;} .poptip-arrow-left i{left:2px;} 希望尖角居中显示

2.5K5 0

CSS实现最简洁的四角边框

在前端有一句古话，叫能用CSS实现的就别麻烦JS，因为声明式的配置语言CSS相比于自由式的编程语言JS，更容易被编译器所优化，比如css渲染引擎会优先考虑gpu加速，因此CSS动画的性能往往高于JS动画...，本文介绍在不需要html和js的配合的情况下，用纯css实现一个好看的四角边框。...用最节能的代码实现如图所示的，在大数据报表中非常常见的四角边框，有点类似Unicode中的制表符和直角括号：⌜ ⌝ ⌞ ⌟，有很多种办法来实现它，但最简洁的是利用边框图像（蒙版）+径向渐变（底图）来实现...就能实现，而且不需要增添额外的dom元素，性能卓越，还可以借此实现方括号：[ ] ⎵ ⎴，只要让椭圆的宽或高略小于盒子，让一边小于50%，另一边大于50%，这样相邻的2个角就能连接上，实现对边边框（请脑补逻辑上的椭圆...所以说，能用CSS就别麻烦JS，JS有更重要的事情要做。

7K7 1

CSS中的小三角实现

在网页制作中我们如何实现小三角？如下京东官网先来看如下代码代码很简单，我们设定元素高宽为0 ，并指定四个边框的颜色不同，就出现了下面的效果基于这种特性，我们做小三角就很简单了... 我们只需将该元素定位到某个div上即可实现京东首页二维码效果

7263 0

巧用 CSS 实现炫彩三角边框动画

最近有个小伙伴问我，在某个网站看到一个使用 SVG 实现的炫彩三角边框动画，问能否使用 CSS 实现：很有意思的一个动画效果，立马让我想起了我在 CSS 奇思妙想边框动画一文中介绍的边框动画，非常的类似...然而，这个三角形动画里有两个难点：整个图形是个三角形在 CSS 中，我们可比较轻松的实现矩形与圆形，但是三角形这里无疑会棘手很多。...当然，CSS 还是可以实现这个图形的，本文就将讲解如何使用 CSS 实现上述炫彩三角边框动画。...通过角向渐变实现主体动画首先，我们还是需要借助角向渐变 conic-gradient 实现整个动画的主体。...不过使用 mask 基于这样一个图形再实现一个小一号的三角形是比较麻烦的，我们相当于要实现这样一个镂空三角形图形，示意图如下：这样一个图形，配合 clip-path，就能得到一个三角形边框图形，啥意思呢

1.6K3 1

纯CSS实现小三角提示信息

实现后的效果如下：不带边框的带边框的在此提供两种实现方式： 1、不带边框的 css： *{margin:0;padding:0;} body{ background...--本Div只来实现三角形，无其他作用--> hello，我出生了 hello，我出生了实现三角形，无其他作用--> hello，我出生了 hello，我出生了实现三角形，无其他作用--> hello，我出生了 hello，我出生了实现三角形，无其他作用--> hello，我出生了 hello，我出生了 2、带边框的 css： /*上三角*/

1.6K3 0

【HTML + CSS】模仿腾讯云页面——初步实现

前端入门实战练习之腾讯云页面实现样例图实现后的样子如图所示，ps：量的尺寸最开始肯定是没有的，都是写一步，测一步，最后就成这样啦使用的工具是 PxCook，方便我们量取图片设计尺寸实现效果...初步实现大致样式，明日进行细节优化，2022.4.3 图中标识位置尚未优化，下面是该部分实现源码 index.html css"> Tencent - navigation <div...购买咨询 style.css.../images/banner.png); } /* 页面上部分列表 */ .top .list { margin-left: 240px; width: 250px; height

2.6K3 0

html+css实现漂亮透明的登录页面，HTML实现炫酷登录页面

今天带大家，用html+css实现一个漂亮的登录页面，代码中关键部分我都做了注释，具体实现过程请看下面的视频和代码。..."viewport" content="width=device-width, initial-scale=1.0"> css... CSS...hue-rotate(deg) 给图像应用色相旋转 calc() 函数用于动态计算长度值 var() 函数调用自定义的CSS属性值x*/ filter: hue-rotate

19.2K5 3

css3实现3角形，椭圆渐变效果

我给你最简洁、直接能用的 CSS3 实现代码：纯 CSS 画三角形 + 椭圆渐变，两种效果都能直接复制到 Next.js + Tailwind 里使用。...一、CSS3 实现三角形（4 种方向，纯 CSS）不用图片，纯边框实现，最标准写法。1....向上三角形css.triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px...向下三角形css.triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right:...向左三角形css.triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-bottom:

2611 0

CSS3圆角详解

CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支持圆角。网页设计大师Nicholas Zakas的最新文章，清晰易懂地解释了CSS3圆角的各个方面，非常值得学习。...========================================= CSS3圆角详解作者：Nicholas Zakas 译者：阮一峰原文：http://msdn.microsoft.com.../en-us/scriptjunkie/gg508841.aspx 发表日期：2010年12月8日一、CSS3圆角的优点传统的圆角生成方案，必须使用多张图片作为背景图案。...CSS3就不会发生这种情况。二、border-radius属性 CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。...moz-border-radius-bottomright（标准语法：border-bottom-right-radius）五、注意事项虽然各大浏览器都支持border-radius，但是在某些细节上，实现都不一样

1.5K2 0

HTML页面用CSS实现禁止选中、复制和右键

最近在写页面的时候，需要在左上角加一个logo，但是复制的时候会把这张图片一块选中。 ?...那么我们可以通过CSS给它设置禁止选中，代码如下： .icon { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: ...HTML页面内容禁止选择、复制、右键刚才在一个站点的源代码的的时候发现的，其实原来真的很简单 <body leftmargin=0 topmargin=0 oncontextmenu='return

5.6K2 0

用SVG实现一个优雅的提示框

NO.3 clip-path方案通常上图的实现是使用CSS画个尖角来拼接上去，比较优秀的方案如下图: ?...其实我们对于原先采用CSS clip-path的方案其实也存在很多的缺陷，它在面对带有阴影、背景透明或者渐变、带边框同时出现时就显出了实现成本高和效果一般的缺点。...关于为何使用drop-shadow来实现阴影，可以看下图使用了box-shadow和drop-shadow效果区别，使用box-shadow的时候我们的尖角部分没有阴影，气泡框部分是有阴影的，就会出现下图所示的情况...NO.8 方案改进要应付多变的气泡尖角一定要想办法把尖角抽离出原先的气泡外层路径，生成尖角路径后在整合到气泡上形成一个完整的闭合路径。...使用SVG来实现ToolTips能覆盖 CSS clip-path不能完美解决的几个场景。在此特别感谢大漠老师的指导。

3.3K1 0

静态彩虹页面（html、css）

<meta http-equiv="X-UA-Compatible" content="IE=edge">

5.2K2 0

CSS变量实现暗黑模式，我的小铺页面已经支持

这篇文章将告诉你如何实现一个自动的 CSS 暗模式，根据你的访客的主题来改变。我在自己的博客页面我的小铺页面实践了一下用 CSS变量和 @media查询实现暗黑模式。 ?...CSS Dark Mode 我定义了变量以设置主题的颜色，我建议你也这样做，因为这样会使这个过程容易得多。...现在我们需要定义一组新的变量，这些变量将在调用 CSS 暗模式时使用。...下面是我博客博客小码页面，效果，支持手动切换和自动切换两种。...现在页面应该变黑。回到您的网站，主题应该已自动更新为黑暗模式。如果您想要测试它是否切换回来，请将值更改为 0。完成测试后，单击垃圾桶删除该选项。

2.3K1 0

页面变灰css代码

--页面变灰--> css"> body * { /* -webkit-filter; grayscale(100%); */ -moz-filter: grayscale...grayscale=1); filter: gray; } 发表时间：2022-12-01 本站文章除注明转载/出处外，皆为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接

1.5K1 0

css绘制三角形

<style> #test { width: 0; height: 0; border: 25px so...

9431 0

css绘制三角形

} 效果如下：如果我们需要让三角形的箭头朝右

1.3K4 0

css3动画代替js脚本实现欢迎页面动画

1.使用脚本操作dom元素在页面加载时，使用js控制dom的animation setTimeout(function() { $('.welcome').fadeOut(1000...的animation实现两个动画通过动画延时属性，实现连续加载 /*小鱼*/ .welcome { background: rgba(255, 255, 255, 1)...gif转换有点问题，效果不是很柔和 3.比较两者都能实现类似效果，但是在css3动画中可以实现跟多的细节，通过transition-timing-function是不是可以做跟多的改变呢，现在流行的趋势中...，mvvm的思想都是尽量不用dom操作，所以说将来的css3动画会右更多的发展空间在现在流行的js库中，实现动画更多的使用的是css3的animation实现，还有浏览器对css3的支持度越来越高，...在对比中提现css3将来的地位还是举足轻重的， 3.1swiper ?

5.1K2 0

HTML+CSS登录页面

第一步:构建HTML框架简介：本文用最通俗的语言，一步步教会大家CSS构建登录页面。首先构建HTML框架，包含用户名，密码，记住密码，注册这几个功能。...注册运行结果：第二步：CSS渲染 2.1先渲染form框架简介：先构造大框架

4.6K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭