如何用css画三角形？ ——border的妙用

最新推荐文章于 2024-06-19 14:48:22 发布
最新推荐文章于 2024-06-19 14:48:22 发布
阅读量220 收藏
点赞数 2
分类专栏： 前端 html5 文章标签： css 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55862073/article/details/128679439
版权

首先先了解css画三角形的原理

        首先看一个例子：给div添加如下样式，让它的底边框和右边框呈现不同的颜色：

        效果如下：        

可以发现：css边框border的衔接部分使用斜切衔接！

没错，这就是css画三角形的原理。如果css边框衔接部分采用的是直直的衔接方式的话是永远画不出来三角型滴！

      css三角形的画法

            一般来说，画一个任意的三角形需要指定三个方向的border(特殊的三角形，例如上面画的直角三角形只需要两个方向的border）

            画的时候知道三角形距离三个方向的距离就能画出三角形来，

        border-right:30px solid transparent

        比如这个语句意思就是三角形的定点距离最右侧的距离是30px

        然后知道哪个方向该填充颜色，哪个方向该透明就可以啦

      举一个具体的例子：

                  画一个边长为50px的等边三角形，三角形的尖尖朝向右侧：

                  顶点距离上方距离：25px

                  顶点距离下方距离:   25px  

                  定点距离左侧距离（三角形的高）：25\sqrt{3}px≈43px

                  然后给div添加这样的样式就可以啦

 

 

                        

学习机器不会机器学习
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS深入了解border：利用border画三角形等图形
duguxueao的专栏
09-22 274
三角形实际上是border的产物 我们正常使用的border都是四边一个颜色，当我们把四边换上不同颜色 那么你就会发现，三角来了~！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3三角形画法</title> <style> .content{ width
css绘制三角形 border
qq_45614506的博客
09-19 621
css绘制三角形（详细）
用css画三角形
04-10
用纯css绘制三角形，不是用图片
CSS画三角形
北海几经夏的博客
03-28 145
盒子模型的上下左右边框交界处出呈现平滑的斜线. 如这个div <style> div{ width:100px; height:100px; border-top:10px solid #666699; border-right:10px solid #FF9900; border-bottom:10px solid #FFFF00; border-left:10px solid #0099CC;
css怎么绘制一个三角形
最新发布
Twinkle_sone的博客
06-19 1318
在CSS中画三角形通常利用border属性来实现，通过设置三个边的宽度为0，并为一个边提供颜色，结合transform属性进行旋转，可以创建一个三角形。
CSS绘制三角形的实现代码(border法)
01-19
使用CSS盒模型中的border（边框）即可实现如下所示的三角形： CSS实现简单三角形 实现原理： 首先来看在为元素添加border时，border的样子；假设有如下代码： <div></div> div { width: 50px; height: 50px; ...
CSS画出各种三角形如等边三角形
09-25
首先，让我们了解基本的CSS三角形制作原理。三角形通常通过设置元素的宽高为0，然后利用非透明边框来形成。由于边框是等宽的，当一个元素的四个边框颜色不同，且至少有一条边的边框颜色可见时，就会形成一个三角形。...
详解CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式
12-14
接下来，我们将深入探讨三种不同的方法来用CSS实现这个效果。 ### 第一种方法：单一边框颜色 ```css #triangle-topleft { border: 30px solid #e6686e; height: 0; width: 0; border-right-color: transparent...
CSS常用样式——绘制各种角度的三角形（1）
程序员学院——专注于IT在线教育
09-04 369
CSS常用样式——绘制各种角度的三角形（1） 1. 前言 在制作前端项目时，我们经常会遇到制作下拉功能时有个小三角，除了我们用图片背景或者iconFont之外，我们可以用CSS来实现。 2. 实现原理 首先我们制作一个正常的模块，添加不同颜色的边框来看下吧！ HTML代码: <div class="demo_0"></div> CSS代码: .demo_0 { width: 100px; height: 100px; margin: 100px auto; border:
利用CSS盒模型中的border（边框）实现三角形
小脚的Blog
11-07 1022
利用CSS盒模型中的border（边框）实现三角形 <div></div> div{ margin: 0 auto; width: 200px; height: 200px; border: 2px solid orange; } 这是我们平常使用border最普遍的情况——往往只给border一个较小的宽度（通常为1-2px）；然而这样的日常用法就会容
css 画三角形
且听风吟的博客
07-11 242
css画三角形原理：参考链接： 今天学到一点新知识，原来用css可以画三角形，很惊讶，于是自己找资料学习了下，原来实现起来很简单~ 原理： 用css画三角形，实际上是用border绘制三角形。 border有一个特性：当一个元素的宽高都为0时，给border设置宽度（至少给2个相邻的边框设置宽度），border就会撑开这个元素；当四个边框同时设置宽度时，四个边最后在元素的中心汇成一个点。 （1）先...
css画三角形
花生吃花生的学习记录
11-08 536
原理：css实现画三角形的原理是利用一个盒子，将盒子的宽度和高度都置为0，那么就不会有content的空白区域，其后利用边界border可以更改颜色的特性来进行绘画。 上代码： 四个三角形： #trans{ height: 0px; width: 0px; border-top:50px solid pink; border-right:50px solid black; bord
html文本框椭圆,怎么用css画椭圆？
05-28
可以使用 CSS 的 border-radius 属性来绘制椭圆形的文本框。具体实现方法如下： ``` input[type="text"] { width: 300px; height: 50px; border-radius: 25px/50%; } ``` 其中，border-radius 属性的值可以用两个数值表示椭圆的水平半径和垂直半径，或者用百分比表示椭圆的圆心到边缘的距离比例。 上述代码中的 25px/50% 表示水平半径为 25 像素，垂直半径为高度的一半，即 50%。这样设置后，文本框的边缘就变成了椭圆形状。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值