css制作一个直角三角形

最新推荐文章于 2024-08-20 19:58:02 发布

·小新

最新推荐文章于 2024-08-20 19:58:02 发布

阅读量559

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/q1054007919/article/details/123102264

版权

本文详细介绍了如何使用CSS创建一个三角形元素，并在实际中应用到`关于我们`的下划线效果。通过设置边框颜色、边框宽度和透明度，实现了一个不占空间的三角形指示符。这个技巧常用于导航菜单、提示信息等，增强了页面的视觉效果。

摘要由CSDN通过智能技术生成

         .triangle {
                    @include widthHeight(0);
                    @include position(absolute);
                    top: pxToRem(1);
                    left: pxToRem(73);
                    right: 0;
                    bottom: 0;
                    border-color: transparent #F0F4F8 transparent transparent;
                    border-style: solid;
                    border-width: 0.32rem 0.17rem 0 0;
                }

 <p class="us">关于我们 <i class="triangle"/> </p>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

·小新

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

用CSS如何画等腰三角形和直角三角形

qianniao_yingmo的博客

03-31

3978

如何用CSS去画我们想要的等腰三角形和直角三角形。

仿小米实现的纯CSS等腰直角三角形 + 仿京东实现纯CSS非等腰直角三角形+聊天框的冒泡样式

鸭绒的博客

07-12

568

我们都是到页面的边框通常是矩形或者椭圆形，那三角形是少见的，那我们用CSS怎么做才能实现三角形呢？文章目录1.实现三角形原理2.仿小米商场三角形3. 仿京东非等腰直角三角形4.总结 1.实现三角形原理先给你看看这样的效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=.

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

css绘制直角三角形

zbailing的博客

06-28

1万+

.tri { width: 0; height: 0; border-color: red blue red blue; border-width: 50px 50px 50px 50px; border-style: solid; } .tri2 { ...

CSS：画出一个直角三角形

听海边涛声

08-20

210

CSS：画出一个直角三角形

用CSS绘制一个三角形

小草莓的博客

07-22

1693

实际上，浏览器不会绘制 clip-path 之外的任何区域，因此我们看到的是 clip-path 的边界。linear-gradient 需要结合 background-image 来实现三角形，下面就来逐步使用渐变实现一个三角形。那如何显示一个直角三角形呢，只需要将临近的两边都显示颜色，其他都是透明即可！最后一种方法 —— clip-path，它是最精简和最可具扩展性的。当一边有颜色，其他都是透明色的时候，就是我们想要的三角形了。使用 clip-path 可以为沿路径放置的每个点定义坐标。

CSS实现直角三角形

kunzedang_9528的博客

03-20

1990

如图：这个盒子的样式该如何实现：盒子只有矩形，圆形，三角形，那梯形如何画出来的呢，即通过一个浮动的直角三角形+矩形，就可以形成梯形这种效果了。理论：直角三角形，把左边和下边的边框宽度设置为0，把上边框宽度调大，即可得到 CSS代码如下 /*代码简写如下*/ .box{ width: 0; height: 0; /*边框颜色*/ border-color: transparent skyblue transparent transparent; /*边框样式*/ border-sty..

css画直角三角形,关于CSS画三角形的那些事

weixin_31659249的博客

08-03

2192

用CSS画一个三角形，是不难的问题，但我却掌握的不够熟练，例如当要求为画一个直角三角形或者等腰三角形，我就有点反应不过来。所以，在这篇中点透它，以后再见，不含糊。原理分析用CSS画三角形，实际上就是在一个框的四边上做文章，如果有一个div，为其设置100px的宽和高，并给其添加10px的黑色边框，这四条边形成一个闭合的正方形，那么这四条边如何分才能达到平均分配的效果呢？那只能是这样：可以看到，每一...

用css写一个直角三角形的盒子

最新发布

10-10

你可以使用CSS的伪元素`::before`和`::after`以及绝对定位来创建一个直角三角形的盒子。下面是一个简单的示例： ```html <!DOCTYPE html> .triangle-box { position: relative; width: 100px; /* 盒子宽度 */ ...

【CSS】用CCS画三角形（含直角三角形）

SEVLT

12-26

1026

原理：利用div的border属性变换得到三角形。 step1：首先画一个宽度、高度、边框都为50px的div，且边框颜色为四种不同颜色： .triangle { height: 50px; width: 50px; border: 50px solid red; border-top-color: blue; border-right-color: black; border...

利用CSS制作三角形

woshileiyaohua的博客

08-08

176

目录前言代码前言前端工程师在开发页面的时候，经常会用到三角形之类的图形来丰富页面效果，下面一起来看一下三角形在CSS上怎么实现。代码设定div的宽高为100，我们会得到一个这样的图形 ...

纯css画直角三角形

weixin_30525825的博客

06-28

358

所有的三角形，都是通过盒子模型来设定。 border（边框）的不同大小来决定 border-width: 边框的宽度 border-style: 边框的样式 border-color: 边框的颜色 1：2个颜色 <!DOCTYPE html> <html> <head> <title>css的直角三角形&lt...

css3实现直角三角形，直角边为圆角

MihawkSun的专栏

01-11

712

right: 0;top: 0;&::before{width: 0;right: 0;top: 0;top: 16rpx;

直角三角形

greenerycn的专栏

03-02

1454

直角三角形有个角为90度的三角形，就是直角三角形。直角三角形的性质：（1）直角三角形两个锐角互余；（2）直角三角形斜边上的中线等于斜边的一半；（3）在直角三角形中，如果有一个锐角等于30°，那么它所对的直角边等于斜边的一半；（4）在直角三角形中，如果有一条直角边等于斜边的一半，那么这条直角边所对的锐角等于30°；（5）在直角三角形中，两条直角边a、b的平方和等于斜边c的平方，即a2＋

使用css画等腰直角三角形

山鬼谣弋痕夕的博客

08-12

4237

使用css画个等腰直角三角形：可以使用border来进行绘制，具体见注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>画直角三角形</title> <st

css 直角三角形 特殊三角形对话气泡

红鲤鱼的博客

05-13

1923

直角三角形 { width: 0px; height: 0px; border-width:15px 15px 15px 5px; border-style:solid; border-color:transparent transparent gray gray; } { width: 0px; height: 0px; bord

【CSS】CSS实现三角形（一）

流萤梦的博客

08-20

3749

如何使用border和linear-gradient实现三角形

css直角线_CSS3做直角三角形

weixin_42155721的博客

01-14

596

原理和[三角形](https://www.zihanzy.com/articles/164)一样为什么要做直角三角形？先来看如下案例(京东首页)![](http://)![](http://www.zihanzy.com/uploads/images/article_con/202008/03/article_con_1596434348_hUOds34e5M.jpg)如图当看到价格栏时，你会想到...

CSS：N种使用CSS 绘制三角形的方法