用css画三角形

最新推荐文章于 2025-06-21 09:15:59 发布
最新推荐文章于 2025-06-21 09:15:59 发布
阅读量828 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： 用css画三角形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42301962/article/details/88013871
本文介绍了如何利用CSS来创建三角形，通过调整边框宽度和颜色，实现不同方向和样式的三角形效果。示例包括HTML和CSS代码，以及最终的显示效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css基础实践</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<!--下三角-->
		<div class="border_down"></div>
		<!--上三角-->
		<div class="border_up"></div>
		
		<!--左三角-->
		<div class="border_left"></div>
		<!--右三角-->
		<div class="border_right"></div>
		<!--气泡框三角形-->
	    <div class="bubble">
	        <span><em></em></span>
	    </div>
	    
	    <!--东北，东南，西北 ，西南三角形的写法-->
	    <div class="border_topleft"></div>
	    <div class="border_bottomright"></div>
	    <div class="border_topright"></div>
	    <div class="border_bottomleft"></div>
	    
	    <div id="curvedarrow"></div>
	    
	    <div id="heart"></div>
	</body>
</html>

2. index.css


div{ display: inline-block;}
/*border-color 上 右 下 左*/
/*向下*/
.border_down{
    width:0;
    height:0px;
    border-width:28px;
    border-style:solid;
    border-color:#333 transparent transparent;
}
/*向上*/
.border_up{
    width:0;
    height:0px;
    border-width:28px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
}
/*向左*/
.border_left{
    width:0;
    height:0px;
    border-width:28px;
    border-style:solid;
    border-color:transparent #333 transparent transparent; /*右边不透明*/
}
/*向右*/
.border_right{
    width:0;
    height:0px;
    border-width:28px;
    border-style:solid;
    border-color:transparent transparent transparent #333; /*左边不透明 */
    margin-left: 30px;
}
/*气泡三角形*/
.bubble{
    width:100px;
    height: 30px;
    background:#fc0; 
    padding:10px 20px; 
    color:#333;  
    border-radius:4px;
    position:absolute; 
    top:30px; 
    left:260px;
    border:1px solid #333;
}
.bubble span{
    display:block; 
    width:0; 
    height:0; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #333; 
    position:absolute; 
    top:-10px; 
    left:50%;/* 三角形居中显示 */
    margin-left:-10px;/* 三角形居中显示 */
}
.bubble em{
    display:block; 
    width:0; 
    height:0; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #fc0; 
    position:absolute; 
    top:1px; 
    left:-10px;
}

.border_topleft{
// 两种写法
//  width:0;
//  height:0;
//  border-width:30px 30px 0 0;
//  border-style:solid;
//  border-color:#333 transparent transparent transparent;
//  margin-left: 8%;
    width: 0;
    height: 0;
    border-top: 30px solid #333;
    border-right: 30px solid transparent;
    margin-left: 8%;
}
.border_bottomright{
    // 两种写法
//  width:0;
//  height:0;
//  border-width:30px 30px 0 0;
//  border-style:solid;
//  border-color:transparent #333 transparent transparent;
    width: 0;
    height: 0;
    border-bottom: 30px solid #333;
    border-left: 30px solid transparent;
}
.border_topright{
    // 两种写法
//  width:0;
//  height:0;
//  border-width:0px 30px 30px 0px;
//  border-style:solid;
//  border-color:transparent #333;

    width: 0;
    height: 0;
    border-top: 30px solid #333;
    border-left: 30px solid transparent;
    margin-left: 1%;
}
.border_bottomleft{
    // 两种写法
//  width:0;
//  height:0;
//  border-width:30px 0px 0px 30px;
//  border-style:solid;
//  border-color:transparent #333;
//  margin-left: 1%;
    width: 0;
    height: 0;
    border-bottom: 30px solid #333;
    border-right: 30px solid transparent;
    margin-left: 1%;
}
#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

效果图如下：

在这里插入图片描述

0?0
关注
专栏目录
CSS：N种使用CSS 绘制三角形的方法
Yummy的博客
04-13 3万+
目录 6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 2、使用 linear-gradient 绘制三角形 3、使用 conic-gradient 绘制三角形 4、transform: rotate 配合 overflow: hidden 绘制三角形 5、使用 clip-path 绘制三角形 6、利用字符绘制三角形 6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 使用 border 实现三角形应该是大部分人都掌握的，也是各种面经中经常出现的
Effective前端3：用CSS画一个三角形
weixin_34378045的博客
10-22 174
三角形的场景很常见，打开一个页面可以看到各种各样的三角形： 由于div一般是四边形，要画个三角形并不是那么直观。你可以贴一张png，但是这种办法有点low，或者是用svg的形式，但是太麻烦。三角形其实可以用CSS画出来。如上图提到，可以分为两种三角形，一种是纯色的三角形，第二种是有边框色的三角形，先介绍最简单的纯色三角形。 1. 三角形的画法 三角形可以用border画出来，首先...
如何用 CSS 实现一个三角形？
最新发布
破损的天堂鸟博客
06-21 1274
时，边框交汇处会形成三角形。通过设置部分边框透明、部分有色即可生成三角形。通过组合上述方法，可灵活实现各类三角形需求，兼顾视觉效果与兼容性。：叠加两个三角形（外层大三角形为边框色，内层小三角形为填充色）。：通过两个线性渐变叠加形成三角形，适合需要渐变效果的场景。：需精确调试角度和位置，兼容性较差（IE9 以下不支持）(在 IE 中默认为透明，再用白色边框覆盖多余部分(：旋转一个矩形元素，用父容器裁剪超出部分。：通过裁剪路径直接定义三角形顶点坐标。：代码简洁，支持复杂形状。：IE6/7 不支持。
CSS绘制三角形
weixin_30924239的博客
01-17 211
1、新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display:block它。 <div class="triangle"></div> 2、把它的宽高设置为height:0px; width:0px; 3、设置边框border属性，用来实现三角形。 首先要了解border具体是怎么样的，我写了一个这样的样式： border:50px ...
怎样用CSS画一个三角形
半夏_2021的博客
04-25 1万+
由于div一般是四边形，要画个三角形并不是那么直观，你可以贴一个png,也可以用svg的形式，但是太麻烦。三角形其实可以用CSS画出。可以分两种三角形： 一是纯色的三角形，二十有边框色的三角形 三角形可以 用border画出来，首先一个有四个border的div应该是这样的
css实现三角形
xiaheader
02-20 1055
今天给大家带来 CSS 三角形绘制方法 代码如下: #triangle-up {     width: 0;     height: 0;     border-left: 50px solid transparent;     border-right: 50px solid transparent;     border-bottom: 100px solid r
使用css画三角形的方法代码
09-25
使用css画三角形的方法代码，大家参考使用吧，下面还有一个兼容IE6的代码
Css画三角形1
08-08
在本例中，我们将探讨如何通过CSS来画出一个加粗边框的三角形。 首先，我们需要理解三角形的构造原理。一个基本的CSS三角形通常由一个具有非零边框的矩形元素构成，但通过设置相邻边框的宽度为0，可以使其塌陷成一...
用CSS代码绘制三角形 纯CSS绘制三角形的代码
09-25
用CSS画三角形 <style type="text/css"> * { margin: 0px; padding: 0px; } .triangle { display: block; height: 0px; width: 0px; border: 50px solid #000; border-color: transparent #f00 #f00 ...
如何用CSS画一个三角形
当幸福来敲门
04-25 1398
平时使用的盒子模型，默认情况下是一个矩形，实现也很简单 <style> .border { width: 50px; height: 50px; border: 2px solid; border-color: #96ceb4 #ffeead #d9534f #ffad60; } </style> <div class="border"></div> 效果如下图所示：
CSS三角形
guizi0809的博客
09-07 3805
一、css三角形的原理 将一个div的宽度和高度设置为0，然后设置边框样式 .triangle{ width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid blue; border-bottom: 100px solid orange; border-left: 100px solid green; } 得到一个由四个三角形组合形成的正方形 将对应位置的边框颜色设
如何用CSS画三角形
不再闪亮的星星的博客
09-02 684
CSS 画 三角形 CSS 三角形的应用
css 画三角形
清风明月的博客
08-17 452
1、斜边在左边三角形 &lt;style&gt; .triangle { border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid #000; ...
css画三角形
Jane_3210的博客
10-14 1547
实现原理 将div的高和宽设置为0，然后设置四个border不同的颜色。效果如下： div#triangle{ width: 0; height: 0; border-top: 50px solid blue; border-right: 50px solid red; border-bottom: 50px solid green; bord...
【CSS】使用 CSS 绘制三角形
小秀的博客
05-14 1447
原理：通过设置元素的宽高为 0，利用透明边框相交形成三角形。• 优点：支持任意形状，容器可添加内容，响应式自适应。• 缺点：低版本浏览器兼容性差（如 IE 不支持）• 优点：兼容性极佳（包括 IE8+），代码简单。• 优点：支持复杂渐变效果，容器保留原有尺寸。• 等边三角形：需计算边框宽度比例（如底边。• 缺点：实现复杂度高，需调试角度和断点。• 缺点：无法在三角形内部添加内容。• 方向控制：调整坐标点顺序（如。• 缺点：依赖字体库，样式控制有限。• 方向控制：调整渐变角度（如。
CSS实现三角形（详细）
热门推荐
qq_61716556的博客
11-29 2万+
三角形的广泛应用 网页设计中我们常常能见到各类三角形，比如二级菜单，下拉列表，三角形作为一个简单的图标能够清晰明了的表明页面的模块和功能。在具体的页面设计过程中可以直接使用背景图片实现，也可以通过CSS代码实现三角形功能。因一般设计时CSS实现三角形简单快捷，这里推荐使用CSS实现三角形。除非三角形图片特别细致精美，优于直接代码实现效果。 三角形具体实现原理 一般盒模型的四个边框的连接处由于颜色统一导致细节部分被忽略。当把一个盒子边框设置为四种颜色时，边框处的细节便暴露出来。细节如下。 可以看到
用css画一个三角形
Floatwor青舟的博客
03-27 934
怎么用css画一个三角形呢？ △ 1、思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。 2、首先创建一个带边框的div <body> <style> #triangle { width: 50px; height: 50px; border: 20px solid; border-color: blue red green greenyellow; } </styl
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值