用CSS画一个小三角（不废话，直接上代码）

最新推荐文章于 2024-11-09 19:20:14 发布
最新推荐文章于 2024-11-09 19:20:14 发布
阅读量129 收藏
点赞数
分类专栏： 笔记 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/T8682828/article/details/126930901
版权 
div {
width:0px;
height:0px;
border-top:10px solid red;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
}

效果：

 

爱在冰川了
关注
专栏目录
css 不规则边角_CSS3绘制不规则图形（一）
weixin_39911066的博客
12-22 712
由于近期的项目中出现了不规则的边框和图形， 所以只好提前先温习一下，以前收集的一些CSS3绘制的图形。。。样式绘制的图形比图片的性能要好，体验更佳。废话不多说，我们直接看效果：1、三角形系列(三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角)主要用到的是：宽度高度设置为0， border的各个边的设置(各个边的透明或不透明)；.triangle-up {/* 三角形 */wi...
如何用css绘制一个三角形？
巷子里的老张先生
11-28 1070
通常我们在开发过程中，像一些播放器的暂停按钮、或者是一些下拉框等等，都会用到三角形。一般我们会使用一些svg或者是icon图标来替代，那么有没有想过该怎么去绘制一个三角形呢？废话多说，接下来跟着咱们步伐一步一步往下走。
CSS利用边框实现三角形详解(上)
yuzhochaojiwudib的博客
05-24 460
204-CSS三角制作
使用css实现一个三角形
qq_49277509的博客
06-06 197
最近学习的我不仅不还以自己连CSS还没有掌握明白，唉，
外行都能看懂的使用CSS画一个三角形
qq_39343308的博客
05-17 211
废话不多说，先上效果图 再上代码 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> /* css3绘制三角形 */ .triangle{ width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角
CSS 三角形生成器
宇叔儿
05-24 323
一款使用纯 CSS 制作三角箭头的工具，它提供了一个直观的界面，来生成三角形状，可实时预览形状效果。本工具支持自定义三角形大小、颜色、方向、边框等属性，最终会生成对应的 CSS 代码，生成的 CSS 代码可直接用于你的项目中
初识前端到实战，CSS代码实现三角形，典型面试题
weixin_45921611的博客
09-22 154
CSS代码实现三角形是一道典型的面试题，不难但是要理解代码的思维逻辑，达到熟练的程度，仔细看代码就会发现其中的规律，编程就是要不断地写代码，熟能生巧，也就体会到了其中的奥秘，写代码是一件很有成就感的事情，真正理解代码的时候就会感觉代码很简单，每个人都有他的天赋，所以大胆地学习吧！ 加油，少年！ 废话不多说，上代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> .
小三角带边框带阴影的div——css实现效果
swallowliyan的专栏
12-14 1万+
第一种情况：带边框的小三角 乍一看，很简单，做小三角，首先想到的是利用border的transparent特性，可以制作出小三角的效果。但是注意，这个小三角本身就是边框制作出来的。怎么能在小三角的外边再加一层小边框呢。那就必须再叠加一层一样的东西，让两者有1px的错位。问题就解决了。不想在页面添加多余的无意义的标签，还想实现这个效果。首先想到的就是用元素的伪类来实现。原理就是这样，废话不多说，上
CSS3绘制不规则图形（一）
热门推荐
suwyer的博客
07-14 3万+
由于近期的项目中出现了不规则的边框和图形， 所以只好提前先温习一下，以前收集的一些CSS3绘制的图形。。。样式绘制的图形比图片的性能要好，体验更佳。废话不多说，我们直接看效果：1、三角形系列（三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角）    主要用到的是：宽度高度设置为0， border的各个边的设置（各个边的透明或不透明）；                 .tri...
纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)
12-13
主要用到了是两个绝对定位的三角形，一个在上面一个在下面。配合一个长方形拼接成了六边形。该效果兼容各大主流浏览器，支持hover效果，重要的是纯css实现的。不多说了，大家运行代码观看效果吧。
android 气泡尖角边框,如何使用CSS实现一个带尖角的气泡框？
weixin_42495504的博客
05-27 672
今天的任务中遇上了一个气泡框，还有需要添加圆角和指向性尖角，所以打开百度默默学习了一波，此文仅供自己记录使用。先来看看预览图先写上盒子，上代码HTML:CSS:.element{width: 0;height: 0;border-top: 20px solid red;border-right: 20px solid blue;border-bottom: 20px solid #727171;b...
使用纯碎的HTML CSS制作多拉A梦（即为CSS画图）
qq_35788269的博客
05-14 1455
使用纯碎的HTML CSS制作多拉A梦（即为CSS画图）今天呢，博主带领小伙伴们使用纯碎的CSS制作一个多拉A梦，对，你没看错，，陪伴我们童年的蓝胖子！233要实现多拉A梦的制作，首先我们需要了解一下CSS画图的基本知识！为了引起小伙伴的兴趣！先来看下多拉A梦制作效果图把！怎么样？是不是超级可爱，2333.我们的蓝胖子，，，，第一,三角形的实现：原理：在css盒子模型之中，当一个盒子的两条边在边角...
CSS无敌：制作上下左右箭头
疯狂前端开发
05-14 4626
今天在重构页面，师姐看到我轮播两边的箭头按钮是切图下来用的，她就让我用其他方法实现。其实很简单，就是一个三角形重叠另一个三角形（一个设置颜色，另一个设置为背景色），然后用绝对定位露出一点点的，这样就形成了箭头了。如图：不说废话，赶紧贴代码！&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &...
使用纯HTML和CSS绘制圣诞树：打造网页中的冬日奇景
最新发布
zhaoshanshan168的博客
11-09 327
通过简单的代码，您可以在网页上实现一棵带有星星、彩球装饰的圣诞树，为网站增添节日氛围。1. **树结构**：利用CSS的`border`属性绘制不同大小的三角形来组成圣诞树的分层结构。4. **彩球装饰**：在树上添加不同颜色的圆形装饰球，让页面更具节日氛围。### HTML & CSS 实现节日圣诞树：一步步打造你的冬季主题网页。2. **树干**：使用一个小矩形模拟树干，增加圣诞树的稳定感。3. **装饰星星**：用金色字体绘制顶部的星星，吸引眼球。
【前端基础】CSS进阶
qq_41413652的博客
11-01 1028
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
HTML CSS H5C3样式语句汇总20241105
m0_63615119的博客
11-05 377
H5C3样式语句汇总20241105
CSS高级技巧_精灵图_字体图标_CSS三角_vertical-align（图像和文字居中在同一行）_溢出文字省略号显示
2301_80636070的博客
11-09 528
目录CSS高级技巧1. 精灵图1.1 为什么需要精灵图1.2 精灵图（sprites）的使用1.2 精灵图的使用案例：拼出自己名字2. 字体图标2.1 字体图标的产生2.2 字体图标的优点2.3 字体图标的下载2.4 字体图标的引入2.4.1 字体文件格式2. 在 CSS 样式中全局声明字体： 简单理解把这些字体文件通过css引入到我们页面中。3. html 标签内添加小图标。4. 给标签定义字体2.5 字体图标的追加3. CSS 三角案例：京东三角4. CSS 用户界面样式4.1 什么是界面样式4.1 鼠
css | padding vs margin
YuuuPeeiiiii的博客
11-05 350
以下代码，外面盒子是100x10的，里面的width设置成了100%，显然，inner.width=100px，那么，inner.padding-bottom设置成100%，照理来说，为10px，但实际不是，而是100px。盒子模型反映，content的height是0，在这种情况下，inner在计算padding属性的时候，会以父元素的width为基准，所以会是100px*100%=100px;padding和margin用百分比的时候是怎么算的？一般情况下，根据相应的父元素属性。
CSS画icon图标系列（一）
weixin_65450681的博客
11-05 497
CSS是一种强大且灵活的样式语言，可以通过控制样式的各种属性来实现对网页的精确控制，使网页更具有吸引力和可读性。所以我们可以利用CSS来做我们的一些icon图标，灵活运用CSS中旋转，拉伸，扭曲裁剪，伪元素选择器，实现icon小图标。
用CSS代码画一个三角形
05-22
我不了解CSS代码，但是可以用HTML代码画一个三角形：; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #000;"></div>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值