巧用border写三角形（border形状）

CSS纯三角形制作技巧

最新推荐文章于 2023-02-12 12:30:48 发布

原创最新推荐文章于 2023-02-12 12:30:48 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了一种利用CSS边框属性创建纯CSS三角形的方法。通过设置不同颜色及宽度的边框，可以在不使用额外图片的情况下轻松实现三角形效果。

网上经常会使用一些三角形，上利用border我们可以做出纯CSS的三角形。

我们知道border是个边抖可以单独设置，（啥是边斗）当四个边相交的时候他们是什么时候改变的？

.div1{ margin:30px; height:0px; width:0px; border-top:solid 100px red; border-left:solid 100px green; border-right:solid 100px orange; border-bottom:solid 100px blue;}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_小肥羊_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端小技巧（一）：边框写三角形

柒钥的博客

09-26

8123

边框写三角形，这个技能从事前端的小伙伴应该都不陌生，不过大多数都是知其然而不知其所以然，今天我们就来探究一下这里面的原理随意的在页面上给一个盒子，然后给一个边框来看看div{ width:100px; height:100px; border:10px solid #f00283; }这样的一段代码，给到盒子的宽高都是100像素，然后10个像素实线的红色边框，效果图如下，看起

边框实现三角形

Cindy_CY的博客

08-15

955

边框实现三角形 边框实现三角形 .triangle { /*不给div设置宽高，只设置边框，并且边框无限大的话它就会无限趋向于中心。*/ width: 0; height: 0; /* width: 100px; h

参与评论您还未登录，请先登录后发表或查看评论

用边框写三角形

weixin_64105376的博客

01-26

752

用css边框来书写出来三角形

利用border创建三角形

happyYYhy的博客

02-28

387

首先确定三角形顶角的朝向，朝向哪个方向，对侧的border值需要设置得小一些。其它三个border值设置大一些，并且将其颜色设置为transparent，就能看到一个三角形的形状了。

利用边框写小三角形

dizzysunshine的博客

09-12

273

简单的代码写小三角形 利用边框做出我们想要的效果单这样看是看不出效果的，可以把盒子的四条边框设置为不同的颜色（图片来源于网上大佬，在此深表感谢）当盒子宽高为零时，四条边框便成为四个三角形，此时将不需要的三条边颜色设置为透明，即可以得到一个三角形, 注意千万不能把其他边的边框设置为border：0 这样得到的只会是一条直线 div { width: 0; ...

详解CSS3 用border写空心三角箭头 (两种写法)

09-27

边框的左右两边设置为透明，底部边框设置为实色，通过调整边框宽度和角度（`rotate(45deg)`）来形成一个三角形的形状。然后，通过`::after`伪元素创建第二个三角形，并将其绝对定位到主三角形的上方和右侧，再通过...

使用CSS的border属性绘制各种几何形状的方法

12-29

border绘制几何形状的原理我们先来看一个简单的小例子：在页面上写一个 div <div class=border-test> 给这个 div 加上以下样式 .border-test { width: 200px; height: 200px; background-color: #000; ...

CSS绘制三角形的实现代码(border法)

09-22

在本文中，我们将深入探讨如何使用CSS中的`border`属性来绘制三角形。这种方法基于CSS盒模型中的边框理论，通过巧妙地调整边框宽度和颜色来创造出各种形状的三角形。首先，理解CSS边框的基本概念是关键。通常，...

CSS中使用border来创建三角形的基本方法讲解

09-27

文章还提到了SegmentFault网站中“采纳”标志的实现方式，它使用了相对定位（position: relative）和绝对定位（position: absolute）结合边框技巧，创建了一个带有文字的三角形形状，通过调整边框宽度来形成非正方形...

CSS Border高级使用实例分享(三角等形状)

12-10

– 调整宽度大小可以调节三角形形状. 示例1 一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图 #test1 { height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0eb7a; border-...

通过border来实现各种三角符号

weixin_30493401的博客

07-15

106

很长时间没有动笔了，最近学的东西很杂很乱！又有点丢了西瓜捡芝麻，走马观花，瞻前顾后的感觉！因此，我决定一步步来，化繁为简，今天就从border入手。很多时候我们都会需要一个三角形或者三角小箭头。我们可以用border来做。当然还有其他很多中方法，比如直接图片，canvas等。直接上代码吧！ <!doctype html> <html lang="en">...

CSS深入了解border：利用border画三角形等图形

weixin_33893473的博客

07-09

205

　　三角形实际上是border的产物我们正常使用的border都是四边一个颜色，当我们把四边换上不同颜色那么你就会发现，三角来了~！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3三角形画法</

【css】用边框border实现各种各样的形状

热门推荐

汪小穆的博客

01-14

1万+

前言：前端性能优化中有一个准则是：能用css实现的图标（图片）就尽量用css去实现，达到减少图片使用的目的，从而减少从服务器请求的资源。该篇就说说怎么用边框border实现各种各样的形状。

border-radius、transitions制作同心圆、三角形

honey_xi的博客

03-24

1359

border-radius、transitions制作同心圆、三角形 **one：**同心圆：建一个正方形盒子，如此设置50%圆角时按照原盒子的长宽不至于成椭圆。用border-radius设置圆角为50%（这样才能形成正圆），设置边框粗细，小于盒子宽度则能形成同心圆。 **tow：**三角形：建一个长宽为0的盒子，设置边框的宽度和颜色，边框形成三角形 <head> <...

CSS中使用border属性来绘制三角形

04-30

2560

文章目录CSS中使用border属性来绘制三角形border-style 属性border-width 属性border-color 属性CSS 边框各边CSS Border - 简写属性使用border属性来绘制三角形 CSS中使用border属性来绘制三角形 在网页设计中我们经常会看到如下这样的三角形，今天我们就来使用border属性来实现这些三角形的绘制首先我们来学习一下CSS的border属性 border-style 属性 border-style 属性指定要显示的边框类型。允许以下值：

如何用border来画三角形

qq_39148344的博客

10-12

776

学习总结 HTML <div class="son"></div> CSS .son{ width: 0px; border: 20px solid; border-color: black transparent transparent; ...

markdown三角函数及一些符号

tanjunming2020的博客

02-12

1686

markdown三角函数及一些符号

【Markdown笔记】数学公式三角函数

08-21

3106

【Markdown笔记】数学公式三角函数在Markdown中使用LaTeX形式的数学公式。基本定义任意角α\alphaα的终边与单位圆交于点P(x,y)P(x,y)P(x,y)时，sin⁡α=y\sin\alpha=ysinα=y ，cos⁡α=x\cos\alpha=xcosα=x ，tan⁡α=yx\tan\alpha=\cfrac{y}{x}tanα=xy 对应的LaTeX公式 $\alpha$ $P(x,y)$ $\sin\alpha=y$ $\cos\alpha=x$ $\tan\al

【例子】用css的border写三角形

hamal_ye的博客

01-07

1625

利用border写三角形，这里提供2种方案：这个盒子的宽高都要先设置成0，用border的值作为宽高 1、先把四周的三角符号都设置成透明，在需要保留的那一个方位设置成有颜色即可，缺点：在透明的地方也占了位置，而且得到的三角形只能是等腰三角； .triangleBox{ width:0; height:0; border:100px solid tr...

CSS border法绘制三角形详解

在CSS中，利用边框(border)属性可以巧妙地创建出各种形状，其中包括三角形。本文将详细解释如何通过border法来实现CSS绘制三角形。 1. **理解CSS边框** CSS边框不仅限于常见的细线，其本质是由多个三角形构成的。...