CSS实现三角形

快来打我* 2023-05-31 02:41 27阅读 0赞

实现三角形的原理就是不给标签元素设置高度，然后给标签只设置外边框，从而实现三角形，例如：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>三角形实现</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.Outer1{
    			width: 0;
    			height: 0;
    			border: solid ;
    			border-width: 20px;
    			border-color: red blue yellow black; 
    		}
    	</style>
    </head>
    <body>
    	
    	<div class="Outer1">
    	</div>
    </body>
    </html>

![20191022100418397.png][]

再根据我们的需要进行修改，比如说需要向上的三角形，那么我们就可以这样设置；

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>三角形实现</title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.Outer1{
    			width: 0;
    			height: 0;
    			border: solid ;
    			border-width: 20px;
    			border-color: transparent transparent yellow transparent; 
    		}
    	</style>
    </head>
    <body>
    	
    	<div class="Outer1">
    	</div>
    </body>
    </html>

![20191022100648160.png][]

[20191022100418397.png]: /images/20230531/98695e8b027c4e85ace0fb3b9af8df91.png
[20191022100648160.png]: /images/20230531/1f9bfb183c844921adce3d929d7e292f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读

相关 css实现圆角三角形，圆角三角形的实现

今天给大家带来一个如何实现圆角三角形的方案，这个方案虽然可以实现，但是也是借助拼凑等方式来实现的，假如想一个div来实现圆角三角形，还是比较困难的。之前文章讲了如何[实现对话框

女爷i/ 2023年10月15日 20:08/ 0 赞/ 38 阅读

相关 css3实现三角形

原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了 .arrow{ width:

末蓝、/ 2023年07月24日 08:36/ 0 赞/ 9 阅读

相关 CSS实现三角形

实现三角形的原理就是不给标签元素设置高度，然后给标签只设置外边框，从而实现三角形，例如： <!DOCTYPE html> <html lang="en">

快来打我*/ 2023年05月31日 02:41/ 0 赞/ 28 阅读

相关 css实现圆角三角形

实现带有圆角的三角形： background: linear-gradient(45deg, transparent 50%, 61C4CF 0%); bac

痛定思痛。/ 2022年10月28日 10:17/ 0 赞/ 623 阅读

相关使用css实现三角形

需要的效果（下图中任意一个颜色的三角形） ![在这里插入图片描述][20210201095602850.png] 以上图案实现的代码 .box{

谁借莪１个温暖的怀抱￠/ 2022年10月26日 12:56/ 0 赞/ 245 阅读

相关 Css实现三角形

背景色三角形，只需改变 transparent（透明色）就可改变方向，border-color 依次为上右下左 <div class="border-down"><

客官°小女子只卖身不卖艺/ 2022年09月11日 05:24/ 0 赞/ 222 阅读

相关 css3实现三角形

1. ![20210809135923946.png][] <div class="upper"></div> .upper { widt

阳光穿透心脏的1/2处/ 2022年09月04日 00:47/ 0 赞/ 224 阅读

相关 css实现三角形

css可以实现各种各样的三角形，减少了切图加载图片，以下是各种三角形的实现方法。 1.首先设置一个盒子的三边为不同的颜色，看下边框是怎么显示的。 <html>

喜欢ヅ旅行/ 2022年07月12日 07:08/ 0 赞/ 270 阅读

相关 css实现三角形

首先我们来看一下这种效果： div\{ width: 0; height: 0; border-left: 80px solid red;

旧城等待，/ 2022年05月15日 00:57/ 0 赞/ 292 阅读

相关 CSS实现三角形

三角形是我们在开发中常用的，比如点击展开某个树状菜单，右边本来是向右的小箭头，然后变为向下，类似的场景很多。那么怎么简单的用css实现一个三角形呢？话不多说，上代码：

Myth丶恋晨/ 2021年09月18日 17:40/ 0 赞/ 469 阅读