利用border实现三角形

最新推荐文章于 2022-05-10 15:28:32 发布
最新推荐文章于 2022-05-10 15:28:32 发布
阅读量1k 收藏 1
点赞数
分类专栏： CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuidinaozhongyan/article/details/72868687
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .app{
      width: 0;
      height: 0;
      border-width: 8px;
      border-style: dashed dashed solid;
      border-color: transparent transparent #c2c2c2;
    }
  </style>
</head>
<body>
   <div class="app"></div>
</body>
</html>
关键点：(1)border-style: dashed dashed solid;相当于 border-style: dashed dashed solid dashed; （上右下左）(2)border-color: transparent transparent #c2c2c2;border为四个方向，相当于4个三角形拼接而成，需要哪个方向三角形，只需要将其他方向颜色为transparent ，该方向为#c2c2c2。
初漾
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS绘制三角形—border法
weixin_45242865的博客
08-24 7225
1. 实现一个简单的三角形 使用 CSS 盒模型中的 border（边框） 即可实现如下所示的三角形：        实现原理：   首先来看在为元素添加 border 时，border 的样子；假设有如下代码： <div></div> div { width: 50px; height: 50px; border: 2px solid orange; }   效果图：          这是我们平常使用 border 最普遍的
CSS实现三角形的四种方法
m0_60237095的博客
04-11 3万+
css三角形的实现
使用 border 属性制作三角形
weixin_49809163的博客
01-20 1349
使用 CSS 的 border 属性制作三角形
HTML:利用border写出三角形的三种方法
mumu42的博客
07-28 5356
第一种方法：需要多大的三角形就设置相应像素的border值，然后将其中三个方向的边框颜色设置为透明或者将边框颜色设置为与背景相同的颜色即可。例如： *{ margin: 0; padding: 0; } div{ width: 0; border: 50px solid red; border-bottom-color:transparent ;/*设置下边
纯CSS写三角形-border法
weixin_34270865的博客
07-04 1538
(1)有边框的三角形 我们来写下带边框的三角形。 如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。 最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。 这里就涉及到...
CSS quiz 带边 border 的三角形
12-13
利用 border 来实现2个三角形 将三角形叠在一起，实现一个类似的效果。 这是一种不错的方案。我现在小三角形的时候，也喜欢用这种方法。 二、终极方案 CSS3 是经常被提起，但在桌面端又很少被用到的内容。像 Alice ...
CSS绘制三角形的实现代码(border法)
09-22
解决方法是创建一个更大的三角形，然后将小三角形放置在其之上，利用绝对定位。例如，我们可以创建一个蓝色的底边三角形，然后在其上方放置一个黄色的三角形： ```css #blue { position: relative; width: 0; ...
css实现三角形.zip
03-06
这个“css实现三角形.zip”压缩包文件包含了如何利用CSS来创建不同方向的三角形的示例，这对于构建诸如下拉菜单、提示箭头等交互元素时非常有用。 首先，我们要理解CSS是如何生成三角形的。由于CSS无法直接画出几何...
CSS代码实现三角形和饼图
09-22
总的来说，CSS代码实现三角形和饼图是一种巧妙而实用的技术，它利用了边框、透明度、旋转和溢出隐藏等特性，不需要额外的图片资源，就可以在网页设计中创建各种动态和交互式的图形元素。这种技术对于前端开发者来说...
利用css绘制三角形的方法及拓展
12-13
以下是常用的三角形形状 其实都是html+css就能实现，很简单 代码如下： 第一种方法 html代码： 复制代码代码如下:<!– 向上 –>”top_triangle”></div><!– 向下 –>”bottom_triangle”></div><!– 向左...
Android-TriangleLabelView显示三角形视图
08-13
TriangleLabelView 显示三角形视图
[css]仅通过border属性绘制三角形
Icey_xuxuxu的博客
05-10 154
css /* border是由三角形组成的 */ .div1{ width: 50px; height: 50px; border: 2px solid orange; } .div2{ width: 50px; height: 50px; border: 40px solid; border-color: red orange yellow green; } .div3{ width: 0px; heig
用border画有边框的三角形
null
07-19 2727
下边这种图每个三角形是怎么画的呢？其实它并不是一个div，而是用设置了宽度的border画的 原理：一个border是由上下左右四个小三角形组成的，它的宽度就是下边这个正方形的边长 代码如下： &lt;div id="triangle"&gt;&lt;/div&gt; #triangle { width: 0; height: 0; border-width: 30px; ...
css3实现三角形（上下左右）
热门推荐
前端小怪兽-凯龙
07-27 9万+
实现三角形的绘制很简单。 第一步：新建一个div。 &lt;div class="kailong"&gt;&lt;/div&gt; 第二步：为盒子添加样式。 1.向上 .kailong{ width:0; height:0; border-right:50px solid transparent; border-left:50px solid transpare...
border绘制三角形
qq_45648136的博客
03-04 307
border: 元素的边框，实际上border是由三角形组合而成，并不是矩形。 transparent:设为透明。 1.边框设置不同的背景色 <style> div { width: 0; height: 0; border-top: 20px solid lightblue; border-left: 20px solid lawngreen; border-right: 20px solid light
利用border制作三角形原理
weixin_30695195的博客
02-12 175
网站前端页面中，有时候会使用一些三角形，除了使用图片的方式之外，利用css的border属性也可以做出相对应的三角形。那么，利用border是如何实现三角形的制作的呢？ 先看下面一个例子： CSS代码： width:100px; height:100px; border-top: solid 100px blue; border-left: solid 10...
纯css利用border制作三角形
湛庐无方
10-16 978
点击我查看原理介绍   rgba(0,0,0,0) 透明 注意逗号 - 透明: IE6浏览器不支持transparent透明属性,就border生成三角技术而言,直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题,原因是在IE6下, 点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上（height>=border-width*3
css-利用border实现三角形箭头的原理
_wings的博客
12-22 901
css样式开发中，有时会使用一个三角形作为箭头的情形，那实现原理是怎样的呢？ 抛开理论，按下面流程演变一次，基本能懂个大概了。 1、首先，实现一个宽高为100px,边框为20px的盒子（为了便于区分，上下左右边框用了不同颜色）： 2、将宽高大小设为0，变成这样： 3、再去掉上边界： 4、最后一步，将左右边界设成透明， 三角形就出来了！！ 实现原理: 主要是利用的盒子边框交叉处的渲染特性。 ...
纯CSS画三角形（带边框）
qq_095的博客
10-09 1万+
实例一： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;style&gt; .find-d
html实现三角形树状图,图解利用CSS实现三角形
最新发布
05-30
要实现三角形树状图，可以使用CSS中的伪元素和边框技巧来实现。具体步骤如下： 1. 创建一个div元素，设置宽度和高度，并添加一个类名。 ```html <div class="triangle"></div> ``` ```css .triangle { width: 0; height: 0; } ``` 2. 使用伪元素:before来添加一个三角形。设置伪元素的宽度和高度都为0，然后使用边框技巧，将三角形的边框宽度设置为0，除了其中一个边框。这样就可以得到一个三角形。 ```css .triangle:before { content: ""; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid red; } ``` 3. 接着可以使用margin和position属性来调整三角形的位置和对齐方式。 ```css .triangle { width: 0; height: 0; margin: 50px auto; position: relative; } .triangle:before { content: ""; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid red; position: absolute; top: 0; left: -20px; } ``` 这样就可以得到一个在中央的红色三角形了。如果需要在三角形下面添加更多的内容，可以将三角形的位置设置为absolute，然后添加一个新的div元素来包含内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值