用border属性画三角形

最新推荐文章于 2023-03-18 16:02:09 发布
最新推荐文章于 2023-03-18 16:02:09 发布
阅读量651 收藏 1
点赞数 1
分类专栏： Html+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45164496/article/details/106694582
版权

1、当一个元素的宽、高都为0，但存在边框时，得到如下效果：

<title>用CSS画三角形</title>
<style>
	.triangle {
	    width: 0;
	    height: 0;
	    border-top: 100px solid #f00;
	    border-right: 100px solid #0f0;
	    border-bottom: 100px solid #00f;
	    border-left: 100px solid #ff0;
	}
</style>
</head>
<body>
    <div class="triangle"></div>
</body>

在这里插入图片描述

给border三角形其中三个边框的颜色设置transparent，即可分别实现任一方向的三角形。比如：

上三角形：

<title>用CSS画三角形</title>
<style>
	.triangle {
	   width: 0;
	   height: 0;
	   border-top: 100px solid transparent;
	   border-right: 100px solid transparent;
	   border-bottom: 100px solid #00f;
	   border-left: 100px solid transparent;
	}
</style>
</head>
<body>
    <div class="triangle"></div>
</body>

在这里插入图片描述

左三角形：

<title>用CSS画三角形</title>
<style>
	.triangle {
	    width: 0;
	    height: 0;
	    border-top: 100px solid transparent;
	    border-right: 100px solid #0f0;
	    border-bottom: 100px solid transparent;
	    border-left: 100px solid transparent;
	}
</style>
</head>
<body>
    <div class="triangle"></div>
</body>

在这里插入图片描述

自～渡
关注
专栏目录
CSS：N种使用CSS 绘制三角形的方法
Yummy的博客
04-13 3万+
目录 6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 2、使用 linear-gradient 绘制三角形 3、使用 conic-gradient 绘制三角形 4、transform: rotate 配合 overflow: hidden 绘制三角形 5、使用 clip-path 绘制三角形 6、利用字符绘制三角形 6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 使用 border 实现三角形应该是大部分人都掌握的，也是各种面经中经常出现的
用border画有边框的三角形
null
07-19 2782
下边这种图每个三角形是怎么画的呢？其实它并不是一个div，而是用设置了宽度的border画的 原理：一个border是由上下左右四个小三角形组成的，它的宽度就是下边这个正方形的边长 代码如下： &lt;div id="triangle"&gt;&lt;/div&gt; #triangle { width: 0; height: 0; border-width: 30px; ...
如何用border画出一个三角形
weixin_41740463的博客
07-14 219
只用html和css语言画三角形,不使用画布… html代码如下: p{} css代码如下: p{ width: 0px; border: 40px solid #fff; border-bottom: 40px solid #ccc; }
用CSS的border画三角形
weixin_33813128的博客
07-15 165
用border画三角形，实际上属于一种奇淫巧技。 利用的是border的一个特性：当一个元素的宽高都为0时，给border设置宽度（至少给2个相邻的边框设置宽度），border就会撑开这个元素。 四个边框同时设置宽度时，四个边最后在元素的中心汇成一个点。 因此当我们给一个有宽高的元素设置border时，四个边框的衔接方式是以对角线形式，而不是直角拼接，如图： 所以不设...
用border属性来画三角形
liubangbo的专栏
12-01 292
在微信公众号上看到一篇用border属性来画三角形的文章，今天来试验一下，果然好使。需求：画一个等腰三角形，底边长200，腰长100。 我们一步一步来实现此需求。 1） 实现一个200宽度的正方形，使其水平垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
使用 border 属性制作三角形
weixin_49809163的博客
01-20 1398
使用 CSS 的 border 属性制作三角形
CSS的border属性绘制简单三角形、边框三角形
weixin_51345632的博客
09-29 3454
伸缩盒布局（ Flexbox ）
CSS-利用border属性画三角形和梯形
Xu_cipu的博客
10-09 1010
首先，看一下border的延申效果： 定义一个正常显示的div .triangle { height: 200px; width: 300px; border-top: 50px solid red; border-right: 50px solid green; border-bottom: 50px solid black; border-left: 50px solid yellow; } ...
CSS中使用border来创建三角形的基本方法讲解
09-27
本篇文章主要探讨了如何使用CSS中的border属性来创建三角形，同时也提及了HTML5 Canvas和SVG作为创建图形的其他选项。 首先，创建CSS三角形的核心在于设置元素的高度（height）和宽度（width）为0，同时设置合适的...
css绘制三角形 border
qq_45614506的博客
09-19 691
css绘制三角形（详细）
CSS绘制三角形的实现代码(border法)
09-22
在本文中，我们将深入探讨如何使用CSS中的`border`属性来绘制三角形。这种方法基于CSS盒模型中的边框理论，通过巧妙地调整边框宽度和颜色来创造出各种形状的三角形。 首先，理解CSS边框的基本概念是关键。通常，...
使用border 画三角形
cvper's world !
12-17 1308
使用CSS 的border实现各种三角形的效果
使用border属性绘制三角形
m0_61368323的博客
03-18 456
使用border来制作三角形！！！
border绘制三角形
qq_45648136的博客
03-04 372
border: 元素的边框，实际上border是由三角形组合而成，并不是矩形。 transparent:设为透明。 1.边框设置不同的背景色 <style> div { width: 0; height: 0; border-top: 20px solid lightblue; border-left: 20px solid lawngreen; border-right: 20px solid light
【学习总结】用border画小三角
zhongmei121的专栏
06-18 402
用border画小三角形的原理：div宽高为0，把border的一条边设置实线和颜色，通过控制不同边的显示，画不同方向的三角形。&lt;html&gt;&lt;head&gt;&lt;style type="text/css"&gt;.test1{width:0px;height:0px;border-style:solid;border-width:10px;border-color:red b...
CSS绘制三角形—border法
weixin_45242865的博客
08-24 7396
1. 实现一个简单的三角形 使用 CSS 盒模型中的 border（边框） 即可实现如下所示的三角形：        实现原理：   首先来看在为元素添加 border 时，border 的样子；假设有如下代码： <div></div> div { width: 50px; height: 50px; border: 2px solid orange; }   效果图：          这是我们平常使用 border 最普遍的
用border实现三角形
qq_36151930的博客
02-23 3158
一.实现三角形 思路：利用border元素是由三角形实现的原理，设置想要的三角形图形，其他三角形设置为透明色即可。 1.首先得到四个三角形： .arrow{ height:0; width:0; border-width:50px 50px ; border-style:solid; ...
如何用border来画三角形
qq_39148344的博客
10-12 751
学习总结 HTML &lt;div class="son"&gt;&lt;/div&gt; CSS             .son{                 width: 0px;                 border: 20px solid;                 border-color: black transparent transparent;    ...
CSS画出三角形（利用Border）
Rh's blog
11-21 524
CSS画出三角形（利用Border） 画出三角形的原理是调整border（边框）的四个方向的宽度，线条样式以及颜色。 如果你将宽度调的足够大，改变不同方向的颜色，你就可以发现盒模型的border是四个梯形一样的线条。 div{ width: 200px; height: 100px; border-le...
html加css画三角形
最新发布
06-05
可以使用CSS3的 `border` 属性来实现一个三角形，具体代码如下： ...需要注意的是，这里的三角形是等腰直角三角形，如果需要画其他形状的三角形，需要调整 `border-width` 和 `border-color` 属性的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值