新手前端偷懒做三角形

最新推荐文章于 2021-08-03 21:36:14 发布
最新推荐文章于 2021-08-03 21:36:14 发布
阅读量230 收藏
点赞数
文章标签： html/css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/roadloser/article/details/88920745
版权

目录

关于list-style (做三角形的偷懒方式)

知道一些属性，能少写点代码。

disclosure-closed

这是顶点向右的三角形，效果如下：
在这里插入图片描述

disclosure-open

这是顶点向下的三角形，效果如下：
顶点向下

p.s.

ps1：控制其大小只需在li标签加font-size即可;同理调颜色。
ps2：disc属性是实心圆，circle为空心圆，其他属性百度。
ps3：disclosure的意思（来自百度翻译）
disclosure

roadloser
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css实现一个扇形或三角形
listStyleScript的博客
04-29 596
css实现一个扇形或三角形 css实现三角形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
三角形css_如何用css绘制三角形？
weixin_39878855的博客
12-17 155
首先，我们知道用边框实现一个三角形很简单，直接上代码上图。.triangleTest { .content div { width: 0; height: 0; &.up { border-left: 50px solid transparent; b...
前端三角形
weixin_30566063的博客
07-05 129
有时候我们在在一些网站看见的一些标题的倒三角，他不是图标，而是通过border生成的三角形。 原理就是长宽为0 通过设置border的线宽来生成三角形。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <...
数学基础 - 第十一章 三角形
qq_39499914的博客
11-11 595
11.1 与三角形有关的线段 11.1.1 三角形的边 由不在同一条直线上的三条线段首尾顺次相接所组成的图形叫做三角形(triangle). 在图11.1-1中,线段AB,BC,CA是三角形的边、点A,B,C是三角形的顶点,∠A,∠B,∠C是相邻两边组成的角，叫做三角形的内角，简称三角形的角. 以“是否有边相等”,可以将三角形分为两类:三边都不相等的三角形和等腰三角形. ...
前端怎么画三角形_CSS三角形的实现原理及运用
weixin_39834281的博客
12-19 352
之前在懒懒分会上分享的一点关于border画小图的内容, 完整的ppt在(链接挂了).原理css盒模型一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.– 调整宽度大小可以调节三角形形状.示例1一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 会...
css实现六角星
qq_39039128的博客
09-23 1259
<!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-U...
前端面试资料2024年大厂进阶秘诀
最新发布
04-22
前端面试资料2024年，大厂进阶秘诀，面试通过秘诀，这个年纪你怎么敢偷懒的？？快背起来！ 1.JavaScript面试真题-210页 2.CSS面试真题-127页 3.ES6面试真题-84页 4.Vue面试真题-237页 5.Vue3面试真题-44页 6.React...
易语言偷懒实现md5加密
08-19
在这个“易语言偷懒实现md5加密”的项目中，开发者通过简单的代码实现了MD5加密功能。 首先，我们来看标题中的"偷懒实现"，这通常意味着开发者可能使用了相对简洁或者直接的方法来完成MD5加密。在易语言中，这可能...
偷懒秘笈之一键生成AjaxControlToolkit标记
03-02
摘要你可知道，使用Ajax扩展控件（加上本文的偷懒工具）要比单独使用普通的Server控件更加省时、省心、省力！更何况还能提高程序的易用性，简直就是鱼与熊掌可以兼得！总之我是已经决定在下一个项目中使用Ajax了。...
在css中怎么写三角形,用css写三角形的方法
weixin_29157493的博客
08-03 311
*{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:1.8; list-style:none;}#info,#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;}#info ...
前端小技巧（一）：边框写三角形
柒钥的博客
09-26 7995
边框写三角形，这个技能从事前端的小伙伴应该都不陌生，不过大多数都是知其然而不知其所以然，今天我们就来探究一下这里面的原理随意的在页面上给一个盒子，然后给一个边框来看看div{ width:100px; height:100px; border:10px solid #f00283; }这样的一段代码，给到盒子的宽高都是100像素，然后10个像素实线的红色边框，效果图如下，看起
前端实现三角形的三种方法
Savannah
11-26 3166
第一种 HTML+CSS <div class="box"></div> <style> .box{ width:0; height:0; border:10px solid; border-color:transparent transparent red red ; } </sty...
CSS创建一个三角形
缓月
10-29 316
先来贴一波骚气的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
纯CSS写三角形-border法
qq_33699819的博客
04-05 180
HTML： <!-- 向上的三角形 --> <div class="triangle_border_up"> <span></span> </div> <!-- 向下的三角形 --> <div class="triangle_border_down"> <span>&l...
CSS中LI圆点样式li {list-style-type:符号名称}
weixin_34161029的博客
04-12 368
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS实现三角形
fly
03-15 145
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; body{ background:blue; } div{
Web前端面试指导(十八)：用纯CSS创建一个三角形的原理是什么？
热门推荐
雄领IT的专栏
09-28 1万+
题目点评 三角形的图标在网页设计是很常见的，属于基本常识题，只要在练习做到过这个功能都能回答出来，可以把你做过的思路描述出来就可以了，本题的难易程度为简单 答题要点 1.采用的是均分Ÿ原理  盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部 2.代码的实现 第一步 保证元素是块级元素 第二步 设置元素的边框 第三步 不需要显示的边框
Excel达人速成：偷懒技术揭秘
"“偷懒”的技术：打造财务Excel达人 pdf" 本书是一本旨在提升财务人员Excel技能的专业指南，由罗惠民和钱勇共同撰写。书中强调通过高效的技术和策略来减少重复劳动，提高工作效率，从而实现"偷懒"的艺术。作者以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值