纯 css 实现三角效果

最新推荐文章于 2024-08-20 19:58:02 发布
最新推荐文章于 2024-08-20 19:58:02 发布
阅读量557 收藏 2
点赞数
分类专栏： HTML 文章标签： css 三角 实现 纯
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cvper/article/details/79775755
版权

之前写过一篇关于 border 如何实现一个三角形的方法，这一次，我们将在这个的基础上实现下面的效果：


关于尺寸方面，自己看着来就行，无所谓的；


步骤一：实现一个400*400的 红色1像素边框的div

     

<!doctype html>
< html>
< head>
< meta charset= "utf-8" >
< title >css 实现三角 </ title >
< style >
.abc {
width : 300 px ;
height : 300 px ;
border : 1 px solid red;
}
< / style >
</ head>
< body>
< div class= "abc" >
</ div >
</ body>
</ html>

效果：



步骤二：在上面这个div内部，再添加两个100*100的div，并且设置宽度为零，高度为零，边框宽度50px;

<!doctype html>
< html>
< head>
< meta charset= "utf-8" >
< title >css 实现三角 </ title >
< style >
.abc {
width : 300 px ;
height : 300 px ;
border : 1 px solid red;
}

.t1 {
width : 0 px ;
height : 0 px ;
border : 50 px solid red;
}

.t2 {
width : 0 px ;
height : 0 px ;
border : 50 px solid green;
}
< / style >
</ head>
< body>
< div class= "abc" >
< div class= "t1"></ div>
< div class= "t2"></ div>
</ div >
</ body>
</ html>

效果：



步骤三：我们给 t1 这个div设置：border-left:50px solid yellow;

<!doctype html>
< html>
< head>
< meta charset= "utf-8" >
< title >css 实现三角 </ title >
< style >
.abc {
width : 300 px ;
height : 300 px ;
border : 1 px solid red;
}

.t1 {
width : 0 px ;
height : 0 px ;
border : 50 px solid red;
border-left : 50 px solid yellow;
}

.t2 {
width : 0 px ;
height : 0 px ;
border : 50 px solid green;
}
< / style >
</ head>
< body>
< div class= "abc" >
< div class= "t1"></ div>
< div class= "t2"></ div>
</ div >
</ body>
</ html>

 效果：



步骤四：我们继续给 t1 设置：border-right-width:0px;

<!doctype html>
< html>
< head>
< meta charset= "utf-8" >
< title >css 实现三角 </ title >
< style >
.abc {
width : 300 px ;
height : 300 px ;
border : 1 px solid red;
}

.t1 {
width : 0 px ;
height : 0 px ;
border : 50 px solid red;
border-left : 50 px solid yellow;
border-right-width : 0 px ;
}

.t2 {
width : 0 px ;
height : 0 px ;
border : 50 px solid green;
}
< / style >
</ head>
< body>
< div class= "abc" >
< div class= "t1"></ div>
< div class= "t2"></ div>
</ div >
</ body>
</ html>

效果：



步骤五：我们继续设置 t1 border-top-color:transparent;  border-bottom-color:transparent; 这样我们就实现了三角，

<!doctype html>
< html>
< head>
< meta charset= "utf-8" >
< title >css 实现三角 </ title >
< style >
.abc {
width : 300 px ;
height : 300 px ;
border : 1 px solid red;
}

.t1 {
width : 0 px ;
height : 0 px ;
border : 50 px solid red;
border-left : 50 px solid yellow;
border-right-width : 0 px ;
border-top-color :transparent;
border-bottom-color :transparent;
}

.t2 {
width : 0 px ;
height : 0 px ;
border : 50 px solid green;
}
< / style >
</ head>
< body>
< div class= "abc" >
< div class= "t1"></ div>
< div class= "t2"></ div>
</ div >
</ body>
</ html>

效果：



步骤六：我们再按照上面 t1 的步骤再将 t2 变成三角形；

<!doctype html>
< html>
< head>
< meta charset= "utf-8" >
< title >css 实现三角 </ title >
< style >
.abc {
width : 300 px ;
height : 300 px ;
border : 1 px solid red;
}

.t1 {
width : 0 px ;
height : 0 px ;
border : 50 px solid red;
border-left : 50 px solid yellow;
border-right-width : 0 px ;
border-top-color :transparent;
border-bottom-color :transparent;
}

.t2 {
width : 0 px ;
height : 0 px ;
border : 50 px solid green;
border-left : 50 px solid yellow;
border-right-width : 0 px ;
border-top-color :transparent;
border-bottom-color :transparent;
}
< / style >
</ head>
< body>
< div class= "abc" >
< div class= "t1"></ div>
< div class= "t2"></ div>
</ div >
</ body>
</ html>

效果：



步骤七：为了让这两个三角移动，我们给abc这个父级div添加相对定位，给两个小三角添加绝对定位；

 

<!doctype html>
< html>
< head>
< meta charset= "utf-8" >
< title >css 实现三角 </ title >
< style >
.abc {
width : 300 px ;
height : 300 px ;
border : 1 px solid red;
position :relative;
}

.t1 {
width : 0 px ;
height : 0 px ;
border : 50 px solid red;
border-left : 50 px solid yellow;
border-right-width : 0 px ;
border-top-color :transparent;
border-bottom-color :transparent;
position :absolute;
left : 300 px ;
top : 50 px ;
}

.t2 {
width : 0 px ;
height : 0 px ;
border : 50 px solid green;
border-left : 50 px solid yellow;
border-right-width : 0 px ;
border-top-color :transparent;
border-bottom-color :transparent;
position :absolute;
left : 299 px ;
top : 50 px ;
}
< / style >
</ head>
< body>
< div class= "abc" >
< div class= "t1"></ div>
< div class= "t2"></ div>
</ div >
</ body>
</ html>


步骤八：我们已经看到两个div 已经合并在一起了，现在让靠左边的div变成白色：

<!doctype html>
< html>
< head>
< meta charset= "utf-8" >
< title >css 实现三角 </ title >
< style >
.abc {
width : 300 px ;
height : 300 px ;
border : 1 px solid red;
position :relative;
}

.t1 {
width : 0 px ;
height : 0 px ;
border : 50 px solid red;
border-left : 50 px solid yellow;
border-right-width : 0 px ;
border-top-color :transparent;
border-bottom-color :transparent;
position :absolute;
left : 300 px ;
top : 50 px ;
}

.t2 {
width : 0 px ;
height : 0 px ;
border : 50 px solid green;
border-left : 50 px solid #fff ;
border-right-width : 0 px ;
border-top-color :transparent;
border-bottom-color :transparent;
position :absolute;
left : 299 px ;
top : 50 px ;
}
< / style >
</ head>
< body>
< div class= "abc" >
< div class= "t1"></ div>
< div class= "t2"></ div>
</ div >
</ body>
</ html>

效果：


（为了清晰表明每一步，css样式未优化，请自行优化）

cvper
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用 css 绘制三角形
zxf_CN的博客
12-14 334
我们可以用 css 的边框样式，来制作一个 三角形 出来： 原理： 通过设置一个 宽，高为零的块级元素，设置4条边为不同颜色，想要设置哪边就设置其他边为透明就可以了。 顺序： 上，右，下，左 。 设置： 用 css 边框模拟； 元素 宽高 设置为零； 4个边都要写，在保留需要的边框颜色，其他的设置为透明的； 为兼容 低版本浏览器，加上 font-size:0; line-height: 0; 版本一： .xx { width: 0; height: 0; border-lef
纯CSS实现三角形
Jayant89的博客
07-23 218
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style type="text/css" media="screen"&gt; .box{ width:20px; height:20px; } &a
css实现三角的一些方法
weixin_30925411的博客
07-24 123
css实现三角没有想象中的那么难，只要明白border的各种属性的意思就很好明白css三角是如何实现的。 一下是几个很简单的例子： css三角形状的制作： css样式: .triangle{ width:0; height:0; border-left:10px solid transparent; ...
css实现三角形
qq_39176307的博客
05-05 268
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、实现思路二、实现代码 前言 通过css实现三角形图案。 一、实现思路 1、设置div宽度和高度为0 2、设置边框宽度,颜色为透明色 3、设置边框方向颜色来控制三角形方向 二、实现代码 <div class="triangle"> </div> .triangle{ width: 0; height: 0; border: 50px solid transparent; .
CSS实现三角形效果
Daisy花园
02-03 1220
CSS实现三角形效果非常简单，这里为了怕自己忘记，特意写在此文中，也供大家讨论学习<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 50px;
CSS - 制作三角形
HVENLY的博客
05-21 693
目录实现原理三角形制作案例一个简单的三角形带边框的三角形 实现原理 其实实现的原理很简单，就是通过css的border属性进行制作。那么为什么border属性这么神奇可以制作我们的三角形呢？因为border的本质就是三角形，我们来看看下面这个例子： html代码： <div class="box1"></div> css代码： .box1 { width: 0; height: 0; border-top: 40px solid pink; bor
纯css实现三角形
陈迹·清欢的博客
03-24 139
先看一个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .example{ width: 40px; ...
纯CSS实现多彩三角形有序变化特效动画时尚背景墙.zip
07-11
不过，这个项目标签中提到的是纯CSS实现，所以没有使用JS。 总结起来，创建这样一个纯CSS多彩三角形有序变化特效动画时尚背景墙，主要涉及以下技术点： 1. 利用边框创建三角形 2. 使用CSS渐变实现多彩效果 3. `@...
纯CSS绘制三角形箭头效果
09-25
纯CSS绘制三角形箭头是一种高效且灵活的方法，可以避免使用图像资源，简化网页设计，同时保持良好的浏览器兼容性。这种技术主要利用了CSS边框的特性来创建形状。以下将详细解释如何通过CSS实现不同方向的三角形箭头...
纯css实现三角的简单实例
09-24
在网页设计中，纯CSS实现三角形是一种常见的技巧，它能帮助我们创建各种形状和箭头，无需使用图片或JavaScript。以下将详细解释如何通过CSS实现这个简单的实例，并讨论其中的关键点。 首先，我们来看一下代码的核心...
纯CSS实现的小三角
12-09
在网页设计中，纯CSS实现的小三角形是一种常见的技巧，常用于创建下拉菜单的箭头、提示框的指向符号等。这种技术基于CSS边框的特性，巧妙地利用了边框之间的交汇点来形成一个视觉上的三角形。下面我们将详细讲解如何...
纯CSS实现页面的尖角、小三角、不同方向尖角的方法小结
09-24
以上三种方法都是纯CSS实现页面尖角、小三角形的有效手段，可以根据具体需求和场景选择合适的方法。它们都利用了CSS的边框和定位特性，通过巧妙的布局和颜色设置，创建出视觉上所需的形状。无论是在导航菜单、提示...
Css3实现三角效果
li3196672779的博客
06-04 316
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> Document body{ margin: 200px;
如何用css绘制一个三角形？
巷子里的老张先生
11-28 1023
通常我们在开发过程中，像一些播放器的暂停按钮、或者是一些下拉框等等，都会用到三角形。一般我们会使用一些svg或者是icon图标来替代，那么有没有想过该怎么去绘制一个三角形呢？废话多说，接下来跟着咱们步伐一步一步往下走。
css实现三角形效果
努力奔跑的小不点
05-18 247
将一个div的宽度和高度设置为0，然后设置边框样式 .triangle{ width: 0; height: 0; border-top: 50px solid black; border-right: 50px solid red; border-bottom: 50px solid green; border-left: 50px solid blue; } 将一个div的border都设置成50px粗，并且不同颜色，效果如下图所示： 将左右下边框设置成
CSS实现三角形的四种方法
热门推荐
m0_60237095的博客
04-11 4万+
css三角形的实现
css实现三角形的几种方法
忧郁的蛋的专栏
08-21 5459
css实现三角形的方法：1、使用边框实现三角形，利用透明边框和实色边框的组合，可以创建不同方向和大小的三角形；2、使用伪元素实现三角形，通过使用伪元素来创建一个占据父元素一半大小的实心三角形；4、使用clip-path属性实现三角形，通过定义多个点的坐标可以创建不同形状的三角形。这种方法通过设置元素的边框来实现三角形，利用透明边框和实色边框的组合，可以创建不同方向和大小的三角形。这种方法通过使用clip-path属性来裁剪元素的形状，通过定义多个点的坐标可以创建不同形状的三角形。
CSS：画出一个直角三角形
最新发布
听海边涛声
08-20 158
CSS：画出一个直角三角形
h5（网页） 调用相机拍照和相册，实现图片上传功能
cvper's world !
05-03 2万+
情景描述： 一个h5或者网页中需要上传图片功能，并且这个功能可以选择本地的图片或者拍照上传； 实现方法： 我们在网页中是可以直接调用手机的相机或者上传本地图片的，也就是说，我们是有使用本地图片文件和 拍照的权限的，即便网页是在微信环境或者其他浏览器环境中，也都是可以的； ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值