css画各种三角形

高山上的人

已于 2023-03-03 16:17:56 修改

阅读量280

点赞数

分类专栏： css 文章标签： css

于 2022-01-26 11:09:18 首次发布

本文链接：https://blog.youkuaiyun.com/aqwef/article/details/122697842

版权

css 专栏收录该内容

2 篇文章

订阅专栏

/* 等腰三角形（箭头朝上）； */ #div1{ width: 0; height: 0; border-bottom: 100px solid cyan; border-left: 50px solid transparent; border-right: 50px solid transparent; }

/* 等腰三角形（箭头朝下）； */ #div2{ width: 0; height: 0; border-top: 100px solid cyan; border-left: 50px solid transparent; border-right: 50px solid transparent; }

/* 等腰三角形（箭头朝左）； */ #div3{ width: 0; height: 0; border-right: 100px solid cyan; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }

/* 等腰三角形（箭头朝右）； */ #div4{ width: 0; height: 0; border-left: 100px solid cyan; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }

/* 直角三角形（箭头左上）； */ #div5{ width: 0; height: 0; border: 50px solid gray; border-right: 50px solid transparent; border-bottom: 50px solid transparent; }

/* 直角三角形（箭头右下）； */ #div6{ width: 0; height: 0; border: 50px solid lightblue; border-left: 50px solid transparent; border-top: 50px solid transparent; }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

高山上的人

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

如何使用CSS画一个三角形，原理是什么？

程序员学习园地。

02-14

1366

CSS 三角形是“CSS Hack”的经典应用，核心在于理解边框叠加的几何特性。

用css画三角形

04-10

用纯css绘制三角形，不是用图片

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

纯css制作带三角的边框(附效果图)

12-13

首先附上效果图：以上的效果完全是用 css 来实现的，那么是怎么实现的呢？我们知道 html 中有一些特殊的字符，具体的请点击 HTML特殊字符大全。通过特殊字符，利用 css 中的 margin 或者 position 方法完全可以实现以上效果。复制代码代码如下:<!DOCTYPE HTML><html lang=”en-US”><head> <meta charset=”UTF-8″> <title>字符制作三角边框</title> <style type=”text/css”> *{margin:0;padding:0;} body{font-fa

CSS画三角形图标

dh7999的博客

06-12

261

/* 等腰三角形（箭头朝上）； */ #div1{ width: 0; height: 0; border-bottom: 100px solid cyan; border-left: 50px solid transparent; border-right: 50px solid tr...

用css画一个倒三角

aweo960421621的博客

09-04

1077

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...

用CSS的border画三角形

weixin_33813128的博客

07-15

179

用border画三角形，实际上属于一种奇淫巧技。利用的是border的一个特性：当一个元素的宽高都为0时，给border设置宽度（至少给2个相邻的边框设置宽度），border就会撑开这个元素。四个边框同时设置宽度时，四个边最后在元素的中心汇成一个点。因此当我们给一个有宽高的元素设置border时，四个边框的衔接方式是以对角线形式，而不是直角拼接，如图：所以不设...

纯CSS写三角形-border法

weixin_34270865的博客

07-04

1616

(1)有边框的三角形 我们来写下带边框的三角形。如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。这里就涉及到...

CSS画出各种三角形如等边三角形

09-25

在CSS世界中，绘制图形可能看似复杂，但通过巧妙利用边框、透明度以及几何原理，我们可以轻松地创建出各种形状，包括等边三角形。本文将深入探讨如何使用CSS来绘制三角形，并特别关注等边三角形的实现方法。首先，...

Css画三角形1

08-08

在本例中，我们将探讨如何通过CSS来画出一个加粗边框的三角形。首先，我们需要理解三角形的构造原理。一个基本的CSS三角形通常由一个具有非零边框的矩形元素构成，但通过设置相邻边框的宽度为0，可以使其塌陷成一...

【css】纯 css 制作带三角的边框

dengrongshou5105的博客

12-04

206

首先附上效果图：以上的效果完全是用 css 来实现的，那么是怎么实现的呢？我们知道 html 中有一些特殊的字符，具体的请点击 HTML特殊字符大全。通过特殊字符，利用 css 中的 margin 或者 position 方法完全可以实现以上效果。 <!DOCTYPE HTML> <html lang="en-US"> <head&...

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

09-22

主要介绍了CSS绘制三角形的实现代码(border法)的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

CSS绘制三角形—border法

Icey_xuxuxu的博客

05-10

494

CSS绘制三角形—border法

CSS-三角形的div框框

LuckyGuyy的博客

11-28

461

<!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...

css怎么绘制一个三角形

Twinkle_sone的博客

06-19

3051

在CSS中画三角形通常利用border属性来实现，通过设置三个边的宽度为0，并为一个边提供颜色，结合transform属性进行旋转，可以创建一个三角形。

CSS用border绘制三角形

chunchun1230的博客

09-19

1011

使用border绘制三角形的思路，就是border尺寸设置一个较大的值，元素自身的宽高设置为0，全部由边线占据，这样每边就会显示为四分之一块的三角形。这样不借助图片，可以直接绘制出三角形了。一个栗子： DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

css border制作三角箭头

weixin_30800987的博客

01-09

css代码： .cor1{ border-width:20px; border-color:#f3961c transparent transparent transparent; _border-color:#f3961c red red red; _filter:chroma(color=red); left:60px; bottom:-40px; } Chroma属...

【css】巧用border制作三角形

weixin_74848466的博客

10-31

540

盒模型上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角

css border实现三角形

weixin_30449453的博客

01-13

154

实现过程：正常的border <div class="box"></div> .box { background: #ddd; width: 100px; height: 100px; border-top: 20px solid yellow; border-right: 20px solid red...

css画立体圆角三角形

最新发布

02-19

### 使用 CSS 绘制立体圆角三角形 为了创建一个具有立体效果的圆角三角形，可以通过组合多个 CSS 属性来实现这一目标。具体来说，`border-radius` 用于定义圆角，而阴影效果则由 `box-shadow` 实现。 #### 创建基本结构首先构建一个基础的 HTML 结构： ```html <div class="rounded-triangle"></div> ``` 接着，在 CSS 中设置该 div 的样式以形成三角形并应用圆角处理： ```css .rounded-triangle { width: 0; height: 0; border-style: solid; border-width: 100px 100px 0 0; /* 控制三角形尺寸 */ border-color: #ff7f50 transparent transparent transparent; /* 设置颜色 */ } ``` 上述代码片段基于零宽高元素并通过指定不同的边框宽度与颜色来模拟出直角三角形的效果[^3]。 #### 添加圆角特性为了让这个三角形拥有圆润的转角，需进一步调整其顶部两个角落处的曲率半径： ```css .rounded-triangle { ... border-top-left-radius: 20%; /* 左上角弯曲程度 */ transform: rotate(45deg); /* 调整方向以便更好地观察圆角 */ } ``` 这里引入了 `transform` 属性旋转图形使得圆角更加明显可见；同时通过百分比形式设定 `border-top-left-radius` 参数让左侧顶点变得平滑[^5]。 #### 构建三维感最后一步就是赋予对象一定的深度感知——即所谓的“立体”外观。这通常借助于投影技术完成： ```css .rounded-triangle { ... box-shadow: -8px -8px 15px rgba(0, 0, 0, 0.2), /* 外部暗影 */ inset 8px 8px 15px rgba(255, 255, 255, 0.7);/* 内部亮光 */ } ``` 这段声明中的第一个参数列表负责外部阴影的位置、模糊范围以及透明度；第二个则是内部光源的作用区域及其强度表现[^4]。综上所述，完整的 CSS 定义如下所示： ```css .rounded-triangle { width: 0; height: 0; border-style: solid; border-width: 100px 100px 0 0; border-color: #ff7f50 transparent transparent transparent; border-top-left-radius: 20%; transform: rotate(45deg); box-shadow: -8px -8px 15px rgba(0, 0, 0, 0.2), inset 8px 8px 15px rgba(255, 255, 255, 0.7); } ``` 这样就完成了带有立体效果的圆角三角形的设计[^1]。