用CSS在页面中制作出一个三角形

最新推荐文章于 2023-04-11 10:00:22 发布
最新推荐文章于 2023-04-11 10:00:22 发布
阅读量415 收藏
点赞数
分类专栏： CSS 文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45830543/article/details/111110190
版权

第一种方法：
1.制作一个宽、高为0，边框为100px的正方形
2.然后给这个正方形的各个边框设置边框色，把其中一个边框色设置为rebeccapurple，其他的设置为透明的。
在这里插入图片描述
效果图：
在这里插入图片描述

第二种方法：
将两个相邻的三角形拼在一起，也可以得到一个三角形。只要将正方形的两个相邻边框都设置成非透明色即可。
在这里插入图片描述

效果图：
在这里插入图片描述

郑敬儒~
关注
专栏目录
如何在页面上画个三角形
LuLiangJun001的博客
05-01 552
如何在页面上画个三角形 首先我们要知道边框的一个特性：每条边框之间是通过斜线衔接的。也就是说，每条边框都可以看作是一个矩形。 <head> <style> #box{ width:100px; height:100px; border-width:50px; border-style:solid; border-color:red gre...
用html+css制作一个简易的三角形^_^（还会把以往制作圆形的代码分享给大家）
m0_69057208的博客
05-03 1463
万物皆有形状，在以往的文章中我在写的过程中制作了许多次的圆形，我就在想，用html是不是还可以制作许多的其他的图形形状？答案是可以的。我在学习过程中，学到了如何制作简易的三角形，今天给大家分享一下。（还有圆形） 第一步：建立相应的文件夹，并创建空白html5的模板。 第二步：开始制作三角形。 1、创建一个空白的区域（使其的高和宽都为0） html代码： <div id="delta"></div> css代码： #delta{ width:0; .
使用 CSS 创建一个三角形
lio-zero 的博客
04-29 198
假设我们有一个简单 div 标签： <div class="triangle"></div> 有什么办法可以画出一个三角形？本文将介绍几种方法实现它。 使用 border 实现 使用盒模型的 border 边框即可快速创建一个三角形。 我们只需要使用其中的三个边框就可以创建一个三角形形状。 所有边框应具有相同的 border-width。 三角形指向的另一侧(即，如果三角...
怎么用CSS实现一 个三角形
暖心少年
04-11 2776
CSS是一个很神奇的东西，在我们的前端开发中用到很多，那么怎么用CSS实现一个三角形呢？工具/原料前端开发工具方法/步骤我们的思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。首先我们创建一个带边框的div：具体代码实现如下：width: 40px;height: 40px;border-width: 40px;border-style: solid;bor...
用css创建一个三角形
Stephen_Numb的博客
01-07 697
三角形在web页面应用很多，不过最常见的还是用来指示，比如悬浮框的边缘。其实三角形的原理比较简单，当一个元素的宽和高都为0的时候，那么border就是一个正方形，这个时候，我们只需要显示正方形的一部分就可以了。 这个正方形被划分为四个部分，上右下左。如果我们需要一个指向上方的三角形，只需要把下面的三角形显示出来，其他的三角形隐藏或者设为透明就可以了。 .box{
用CSS将div变成三角形
热门推荐
hesterdev的专栏
01-05 1万+
方形变三角形通常我们印象中的HTML元素都是四四方方的，但是四四方方的东西也可以构建出完美的三角形哦。因为当一个矩形必须要平分给其上下左右四个方向的时候，就只好平分成四个三角形了。代码实现<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" />
实用的利用 CSS + &lt;em&gt;标签 来完成一个三角形的制作
10-30
要实现一个使用CSS和标签完成的三角形，我们需要理解CSS中边框属性的巧妙应用。在上述代码中，展示了如何通过设置标签的边框来创建一个三角形。 首先，我们需要定义一个列表，列表的每一项（）中包含一个用于显示...
用CSS制作三角形和按钮的简单实例
09-24
这篇文章主要介绍了如何使用CSS来制作三角形和按钮。在前端开发中，CSS不仅可以用来改变页面元素的样式，还能创造出具有创意和实用功能的图形和界面组件。下面将详细介绍文章中提及的知识点。 ### 制作三角形 制作...
CSS画出各种三角形如等边三角形
09-25
在CSS世界中，绘制图形可能看似复杂，但通过巧妙利用边框、透明度以及几何原理，我们可以轻松地创建出各种形状，包括等边三角形。本文将深入探讨如何使用CSS来绘制三角形，并特别关注等边三角形的实现方法。 首先，...
css如何实现三角形的方法
sk_yi的博客
06-20 477
在开发页面的时候，遇到很多的列表都需要用到箭头，可以直接用图片作背景铺垫，纯CSS也能实现，并且没有兼容性顾虑，不用CSS3,相比而言，比图片更好用。 原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了 梯形代码： div{ width: 50px; height: 50px; border: 50px solid transparent;
【系统学习css】第一天，实现各种形状，用css 实现各种三角形
qq_17335549的博客
04-21 536
1，实现正方形 <div class="square"></div> .square { width: 100px; height: 100px; border: 1px solid; } 2, 实现各种方向的三角形，根据一个正方形演化而来 先画一个有边框的正方形，把边框加粗，加到很粗 <div class="square"></div> .square { width: 100px; height:
HTML,CSS 三角形制作案例（等边三角形 直角三角形）
Mr_wang001的博客
05-07 613
HTML,CSS 三角形制作案例（等边三角形 直角三角形）
利用HTML for循环制作一个正直角三角形
zh123456456456的博客
05-07 901
<script> for(vari=0;i<5;i++){//确定行数5行 for(varj=0;j<=i;j++){//确定每列有几个* //j=0i=0<5j<=ij++1i++1 //j=0i=1<5j<=ij++2i++2 //j=0i=2<5j<=i...
直角三角形
qq_41988113的博客
03-13 730
描述 请补全JavaScript代码，要求在页面上渲染出一个直角三角形，三角形换行要求使用"br"实现。三角形如下： * ** *** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div class='triangle'></div>
利用css制作三角形
weixin_47304385的博客
06-04 800
制作三角形
css实现三角形的最简单方式原理剖析
qq_42961150的博客
07-04 383
一个没有宽高的矩形是可以由四条边组成，那么这四条边的形状就是三角形，把其中三条边的颜色都设置成透明，那么就剩下一个三角形，这就是最终想要的三角形
正方形隐藏呈三角形html,CSS 搞事技巧：border+transparent
weixin_42300113的博客
05-31 628
介绍出门忘带电源线，快递到了终于可以继续水文章了。好不容易获得一个面试机会，面试官很 Nice，可惜的是当时处于懵逼状态，错过了大好的机会：面试官：巴拉巴拉吧……我：嗯，啊，这个，那(吱吱呜呜)……面试官：你知道怎么绘制三角形嘛？我：主要是利用了 border 和 transparent 这两个属性。其余边设置为 transparent，然后将对应的方向设置为需要的颜色即可，一般常用等边，等腰啊来...
三种纯CSS实现三角形的方法
lingjiuhun的专栏
11-12 1253
三种纯CSS实现三角形的方法 发表于 2012/06/17 看到像上图这样的 tip 的小三角，你会怎么办？ 切个图上去？恩，不错，简单，兼容性也一级棒，不但好控制，那点小东西也增加不了多少图片的大小。但有没有更好更讲究技巧的办法呢？哈哈，那必须有啊，而且还不止一种呢：） 纯 CSS 做三角形的方法，目前我知道三种，分别是利用 border 属性，“◆”字符，和
CSS实现三角形的四种方法
最新发布
m0_60237095的博客
04-11 4万+
css三角形的实现
CSS实战：打造网页常用图标（三角形、暂停/加号、下载与关闭）
通过设置一个无宽度和高度的`<div>`元素，然后应用上边框和下边框为透明，左右边框为红色，利用边框的不同宽度创建出三角形的效果。CSS代码如下： ```css .box { width: 0; height: 0; border-top: 50px solid ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值