怎么用css写出三角形？

<div></div>
/*css样式*/
div
{
width:0px;
height:0px;
border:100px solid black;
border-left-color: transparent ;
border-right-color:transparent;
border-top-color:transparent;
}2021-04-26

我们的思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。

请点击输入图片描述
首先我们创建一个带边框的div：
具体代码实现如下：
width: 40px;
height: 40px;
border-width: 40px;
border-style: solid;
border-color: red green blue brown;

请点击输入图片描述
然后我们将内部DIV的宽高设置为0：
width: 20px;
height: 20px;
border-width: 10px;
border-style: solid;
border-color: red green blue brown;

请点击输入图片描述
将其他的三个边框给取消点：
width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: red transparent transparent transparent;

请点击输入图片描述
利用更改border的边框，我们可以随意控制写出我们想要的三角形，通过控制边框的大小来实现三角形的大小，通过控制边框的位置来改变三角形的位置。

请点击输入图片描述
6
使用上面的方式实现三角形有一个问题就是，三角形的方位不太好控制，但是使用其他的方式依然会面临这样的问题。

请点击输入图片描述
2021-04-26

2021-04-26

mengvlog 阅读 10 次 更新于 2025-06-20 20:09:45 我来答关注问题 0

3 个回答檬味博客专题活动

如何用CSS绘制任意形状三角形?
步骤：将div的宽高设置为0，以隐藏其矩形区域。设置borderstyle为solid。调整borderwidth，使得其中三条边的宽度为0，仅保留一条边的宽度，以形成三角形的一边。设置bordercolor，仅显示需要的border颜色，其他颜色设为transparent或相同的背景色以隐藏。优点：实现简单，兼容性好。transform方案：原理：利用C...
如何用CSS绘制任意形状三角形?
利用CSS绘制任意形状三角形，可以通过多种方法实现，以下分别介绍border方案、transform方案和clip-path方案。border方案 div元素通常为矩形，但通过调整border属性，可以将其分割为四个等腰三角形，进而绘制出任意形状的三角形。调整border-width可改变三角形的形状，使用border-color仅显示border线即可完成三角形...
如何用纯css画一个三角形?
利用CSS的border属性，可以将一个矩形分割为四个等腰三角形，通过调整border-width可以调整三角形的形状。将目标三角形作为原始矩形的1/4局部，计算所需变量，包括边长、坐标等，并设定最大角等前提条件，实现单个三角形的绘制。利用二维仿射变换，可以将一个矩形通过斜切调整为任意形状的平行四边形，进而调...
css怎么绘制一个三角形
在CSS中绘制三角形，可以通过以下几种方法实现：使用border属性：设置一个元素的宽度和高度为0。设置其border属性，其中三个边的宽度设为0，一个边的宽度设为所需三角形的高度或宽度，并设置颜色。通过调整元素的旋转角度，可以创建不同方向的三角形。使用clippath属性：利用clippath裁剪元素。通过polygon函...
css怎么绘制一个三角形
CSS中绘制三角形的方法多种多样，主要通过border、clip-path、伪元素以及SVG等技术实现。以下是具体的方法：1. border属性：使用`.triangle`类，设置三个边宽度为0，其中一个边为颜色，通过旋转创建三角形，如图所示。2. clip-path：`.triangle-clip`类利用clip-path裁剪元素，通过polygon函数定义顶点，...

其他CSS类似问题

檬味博客在线解答立即免费咨询

怎么用css写出三角形？

其他CSS类似问题

CSS相关话题