vue 页面 css画一个方块替代图标

2024-11-01

43.纯 CSS 绘制一个充满动感的 Vue logo

原文地址:https://segmentfault.com/a/1190000015177284 感想: 又有点回到boder的三角形 HTML code: <div class="vue"> <span class="outer"></span> <span class="middle"></span> <span class="inner"></

使用css画一个箭头

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>使用css画一个箭头</title> <style type

css画一个提示框

用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .dialog{ display:inline-block; padding:10px; border-radius: 4px; z-index: 2000;

最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣,果断收藏.话不多说,直接贴一张生动到一塌糊涂的图. 前端代码如下: <!DOCTYPE html> <html> <head> <title>用css画一个小猪佩奇</title> <style type="text/css"

CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头

壹 ❀ 引这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是没难度的,简述原理?我突然一愣,虽然我知道通过边框可以做到,那为什么这么设置边框可以实现呢,抱着这个疑问于是有了这篇文章,那么本文开始. 贰 ❀ CSS画一个三角形 1.不同理解的边框写CSS样式的同学与边框border打交道就像每天早上起来拥抱太阳,吃泡面加根肠一样平常,一直以来在我印象里,边

div+css画一个小猪佩奇

用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV)  <div class="pig_container">  <div class="tail_left"></div> <div class="tail_right"></div> <div class="tail_

Effective前端3：用CSS画一个三角形

p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形.

Effective前端(3)用CSS画一个三角形

来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法三角形可以用border画出来,首先一个有四个border的div应该是

用CSS画一个带阴影的三角形的示例代码

1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种通过边框控制, border-left和border-right设为透明, border-top设为预定的颜色即可通过 transform 旋转盒子方法一可以画三角形, 但是画阴影是很难做到的(如果做到的朋友, 欢迎给我留言) 2. 设计 2.1 边框法 html结构 ? 1 2 3 <bod

Effective前端1---chapter 2 用CSS画一个三角形

1.CSS画三角形的画法第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></div> <style> .triangle{ margin: 100px; border-top: 40px solid #000; border-bottom: 40px solid #333; border-left: 40px solid #666; border-right: 40px

css实战#用css画一个中国结

大家好!今天跟大家分享一个用 css 画中国结的教程.最终效果如下: 大家如果感兴趣可以参考我的源码:gitHub地址首先,我们定义好画中国结需要的结构: <div class="knot"> <span class="box"></span> <span class="box"></span> <span class="box"></span&g

如何用css画一个彩虹---v客学院技术分享

无意间看到了CSS radial-gradient() 函数实现了如下图的样式仔细一看还真有点像灯光下的鸡蛋,O(∩_∩)O哈哈~ 今天我就来用radial-gradient()函数教大家画一个简单的彩虹吧~~~~ 语法请参照此链接http://www.runoob.com/cssref/func-radial-gradient.html 1.首先画好结构,也就是在网页中画一个div 2.接着为div设置border-radius为100%,也就是直径为260个像素,使其变成了一个圆 3.然后

8.17 纯css画一个着重号图标

今天看到一个同事写的着重号图标,我以为是图片,仔细一看,是span标签!哇!!学习一下哈哈图标长这样: CSS代码: .hint{ display: inline-block; width: 20px; height: 20px; line-height: 20px; border: 1px solid red; border-radius: 10px; color: red; text-align: center; margin-left: 10px; cursor: default; }

CSS 画一个心

效果图: 实现原理: 可以把这个心分为两部分,两个长方形,分别设置 border-radius,transform: rotate() . 设置属性之后再次添加一个,设置相反的 rotate 设置其中一个的 left 值就成了为了看起来有立体感,可以设置左边的 box-shadow . CSS body{ height: 100%; margin:; } div{ width: 1px; height: 1px; margin: 300px auto; position: relative

如何用纯 CSS 创作一个方块旋转动画

效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/czDMNsw 源代码下载本地下载每日前端实战系列的全部源代码请从 github 下载: https://github.com/

如何用css画一个文件上传图案？

如下图,如果是你,你会怎么实现: 通常我们会通过字体图标来显示中间的加号,外层用一个div包裹即可:或者使用伪元素来模拟中间的一横一竖,这都比较麻烦. 其实我们可以直接使用div+css就可以实现. 轮廓属性outline outline属性是用来设置一个或多个单独的轮廓属性的简写属性 , 例如 . 轮廓有下面几个属性: { outline-style: solid; outline-width: 10px; outline-color: red; } 他们有一种简写形式: { outline:

前端每日实战：86# 视频演示如何用纯 CSS 创作一个方块旋转动画

效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/czDMNsw 源代码下载每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f

CSS 画一个八卦

效果图: 实现原理: 设置高度为宽度的2倍的一个框,利用 border 补全另一半的宽度,设置圆角用两个 div 设置不同的颜色,定位到圆的上下指定位置. 最后只剩下里面的小圆圈了.设个宽高,圆角即可. CSS body{ height: 100%; margin: 0 auto; } .bg_box{ width: 100px; height: 200px; margin: 200px auto; background-color: white; border-color: black; b

用css画一个哆啦A梦

原图: 效果图: 虽然说没用啥什么高级的技巧,但这让我感受到了CSS的乐趣! 好好学习,天天向上! <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body{ background-color: #66B3FF; height: 300px; overflow: hidden; } #head{ width: 200px;

使用CSS画一个三角形

<div style="width:0px;height:0px;border-width:40px;border-style:solid;border-color:transparent transparent Green transparent"></div> 好好琢磨一下盒子模型.

用css画一个倒三角

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con