各种三角形的制作

最新推荐文章于 2021-03-14 11:35:33 发布
原创 最新推荐文章于 2021-03-14 11:35:33 发布 · 568 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#backgroun #position #border

本文介绍了使用纯CSS在不同电商网站背景下绘制三角形的方法，包括通过边框颜色差异实现的淘宝三角形，利用伪元素扩展视觉效果的京东三角形，以及结合绝对定位和特殊字符创造的易迅三角形。

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

淘宝三角形

<style type="text/css">
div{
width: 0;
height: 0;
border: 50px solid;
border-color: yellow transparent transparent transparent;
}
div:hover{
border-color:transparent transparent yellow transparent;
position: absolute;
top: -50px;
}
</style>
</head>
<body>
<div>
</div>
</body>

京东三角形：

<style type="text/css">
*{
width: 0;
height: 0;
}
div{
width: 0;
height: 0;
border: 30px solid red;
border-color: transparent transparent red transparent;
position: relative;
}
div::after{
content: "";
display: block;
width: 0;
height: 0;
border: 30px solid black;
border-color: transparent transparent white transparent;
top: -20px;
left: -30px;
position: absolute;
}
</style>
</head>
<body>
<div>

</div>
</body>


易迅三角形：

<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 50px;
height: 50px;
border: 1px solid red;
position: relative;
overflow: hidden;
border-color: transparent;

}
p{
font-size: 30px;
position: absolute;
top: 3px;
left:40px ;
}
</style>
</head>
<body>
<div>
<p>◇</p>
</div>
</body>

qq_39565864
关注
css transform制作三角图形
yyjourney的博客
09-28 2196
以前做项目的时候，会遇到导航尖角的情况，那时候用的方法就是利用border的四个边的长度做出来的，今天发现一个不一样的方法transform；首先创建html <div class="box"> <div class="sanjiao"> </div> </div>然后编写css样式 *{ margin:0;
三角形的写法
qq_45716607的博客
05-21 321
方法一 利用html css直接写 1 一个width:0; height:0;的边框 2 将四个边框透明色 3 上边框红色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
三角形的制作
等什么丫的博客
02-01 940
开发工具与关键技术：DW , css3 作者：吴维杰 撰写时间：2019年2月1日 下面介绍一下三角形的制作。 有很多人都会走进用一个盒子来制作三角形的误区，其实不是这样，三角形是用表框的宽度来制作的。如下面图片。 制作三角形是有技巧的，首先设置它的边框，想要大点的角形就设置大点，得到的效果是一个正方形，最后设置四个边的颜色，让其它三个边的颜色为透明色，另外一边为显眼的颜色就可以了。...
三角形制作
王菜鸟的博客
07-13 343
关于小型三角形制作，在项目中，我们会用到三角形定位到矩形盒子上就会让盒子产生倾斜效果以达到想要的目的。 首先三角形代码如下： div { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #f00; } 效果如图： 制作左三角形，注意，这里不是直接让三角形旋转，而是让它的大小变得与定位的父盒子一样高度，**相当于上面三角形的一半，**代码如下： .
三角形制作方法
qq_52138438的博客
03-14 236
三角形制作方法 <html> <head> <meta charset="utf-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="lesson6.css"> <style> .triangle{ width: 0; height: 0; border:40px solid red; borde
圆的制作●●●三角形制作▲▲▲
Java那点事
11-05 437
关于圆的代码和三角形代码
CSS画出各种三角形如等边三角形
09-25
首先，让我们了解基本的CSS三角形制作原理。三角形通常通过设置元素的宽高为0，然后利用非透明边框来形成。由于边框是等宽的，当一个元素的四个边框颜色不同，且至少有一条边的边框颜色可见时，就会形成一个三角形。...
CSS仿网易首页的头部菜单栏按钮和三角形制作方法
01-19
我先说如何制作三角形吧，相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧，比如说：  网易首页的头部菜单栏中，也会有这样的三角形 当鼠标经过时，三角形会垂直翻转，如下 现在我分享制作三角形的...
用CSS属性transparent实现各种三角形示例代码
09-24
通过上述技巧，我们能够仅使用CSS的边框属性来制作各种形状的三角形，无需添加额外的图片或者图形元素，从而保持页面的轻量级，并利用CSS的特性达到良好的视觉效果和性能表现。通过阅读和理解本文内容，相信读者可以...
各种大小VC 6.0制作的三角形按钮源代码.rar
07-10
总的来说，这个"各种大小VC 6.0制作的三角形按钮源代码"是一个展示如何扩展Windows标准控件功能的实例，它结合了图形绘制、自定义事件处理和用户界面设计等多个方面的知识。对于学习和理解VC 6.0的GUI编程，这样的源...
一些三角形的写法
amwayy的专栏
10-28 677
www.zishu.cn /*zishu.cn*/ *{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:1.8; list-style:none;} #info,#nav{ margin:50px; border:1px dashed #FF3300; ...
三角的写法
yzt02012的博客
09-10 399
.container{margin:50px auto; width: 800px; text-align: center;background: #ccc;}   //最外层大的div .con-arrow{position: relative;   //内部框div background: #88b7d5; padding: 40px; width: 280px; height: 1
一个简单的三角形写法 用的时候方便点
前端劝退工程师
05-15 704
/*----------------三角形 ············*/ #demo { width: 100px; height: 100px; background: #fff; position: relative; top:300px; ...
css三角形实现写法全攻略收集
关注web前端开发这点事
03-26 358
神奇的CSS形状http://www.xinran001.com/bbs/thread-73263-1-2.html边框模拟小三角形http://www.xinran001.com/bbs/thread-70877-1-1.htmlCSS三角形的一些应用http://www.xinran001.com/bbs/thread-71356-1-1.htmlTip中小三角的实现http://www.xi...
表示一个三角形面，初始构造函数写法
qq_32563489的博客
04-04 226
/*! \struct TriFace 表示一个三角面 \brief */ struct TriFace { unsigned int vIdx[3]; //一个三角形的三个顶点索引 TriFace(unsigned int vid1 = 0, unsigned int vid2 = ...
用html,css制作一个三角形
热门推荐
zjgyb37的博客
10-15 2万+
用html,css制作一个三角形。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三角形</title> <style> .triangle { width: 0; height: 0; border: 40px so
前端小技巧（一）：边框写三角形
柒钥的博客
09-26 8121
边框写三角形，这个技能从事前端的小伙伴应该都不陌生，不过大多数都是知其然而不知其所以然，今天我们就来探究一下这里面的原理随意的在页面上给一个盒子，然后给一个边框来看看div{ width:100px; height:100px; border:10px solid #f00283; }这样的一段代码，给到盒子的宽高都是100像素，然后10个像素实线的红色边框，效果图如下，看起
css3 transition属性实现三角形
莫不静好
07-11 1429
css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值，增强用户体验。 transition主要包含四个属性值 1、变化的属性：transition-property transition-property : none | all | [][’,’]* ; ...
hbuilderx制作三角形
最新发布
10-11
HBuilderX是一款基于WebIDE的前端开发工具，主要用于快速构建HTML、CSS和JavaScript应用。如果你想用HBuilderX来制作一个简单的HTML页面来显示三角形，你可以利用CSS的伪元素`::before`和`::after`实现，因为它们可以让你创建出形状。下面是一个基础的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; /* 可以改变颜色 */ position: relative; margin-top: 50px; } .triangle:before { content: ""; position: absolute; top: -50px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; /* 使用相同的颜色 */ } </style> </head> <body> <div class="triangle"></div> </body> </html> ``` 在这个例子中，`.triangle`和`.triangle:before`组合起来形成了一个直角三角形。通过调整边长和颜色，你可以轻松修改三角形的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值